CSS 中 position 属性详解
CSS 中 position 属性
- position 属性指定了元素的定位类型
- 元素可以使用的顶部
top
,底部bottom
,左侧left
和右侧right
属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。
1.static 定位
HTML 元素的默认值,即没有定位,遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
2.fixed 固定定位
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动
Fixed定位使元素的位置与文档流无关,因此不占据空间。
Fixed定位的元素可以和其他元素重叠。
3.relative 相对定位
相对定位元素的定位是相对其正常位置。
h2.pos_left
{position:relative;left:-20px;
}
h2.pos_right
{position:relative;left:20px;
}
- 使用相对定位,位置从自身出发。
- 还占据原来的位置。
- 行内元素使用相对定位不能转行内块
- 相对定位元素经常被用来作为绝对定位元素的容器块。
4.absolute 绝对定位
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于:
- 元素使用绝对定位之后不占据原来的位置(脱标)
- 元素使用绝对定位,位置是从浏览器出发。
- 嵌套的盒子,父盒子没有使用定位,子盒子绝对定位,子盒子位置是从浏览器出发。
- 嵌套的盒子,父盒子使用定位,子盒子绝对定位,子盒子位置是从父元素位置出发。
5.sticky 粘贴定位
sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。position: sticky
基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动,在 position:relative
与 position:fixed
定位之间切换。它的行为就像position:relative
而当页面滚动超出目标区域时,它的表现就像position:fixed
,它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix。
CSS 中 position 属性详解相关推荐
- CSS中line-height属性详解(CSS之四)
CSS中line-height属性详解 基本概念 line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 图中两行基线之间的距离就是行高,基线相关可以查看CSS ...
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | hand ...
- CSS中float属性详解
首先我们了解到,CSS网页布局的原理,就是按照HTML代码中对象声明的顺序,以流布局的方式来显示它,而流布局就不得不说到float浮动技术..在HTML中的所有对象,默认分为两种:块元素(block ...
- css中reset属性详解,css中如何使用counter-reset属性
css中如何使用counter-reset属性 发布时间:2020-09-23 14:26:58 来源:亿速云 阅读:83 作者:小新 这篇文章主要介绍css中如何使用counter-reset属性, ...
- CSS中margin属性详解
margin属性概述 margin是CSS层叠样式表中用来规定围绕在元素边框周围空白区域范围的属性. 该接受任何长度单位,可以是像素.英寸.毫米或 em. 相关属性 margin 可以单独改变元素的上 ...
- HTML中元素的position属性详解
HTML中元素的position属性详解 转载自:https://blog.csdn.net/wangzunkuan/article/details/81540935 HTML中DOM元素有5种定位属 ...
- css动画相关属性详解
css动画相关属性详解 文章目录 css动画相关属性详解 什么是CSS动画? 一.@keyframes规则 二.延迟动画-animation-delay 三.设置动画应运行多少次animation-i ...
- (图文详细)最通俗易懂的CSS 浮动float属性详解
(图文详细)最通俗易懂的CSS 浮动float属性详解 声明:本文属于搬砖大神的文章到自己的博客上,原文地址为:https://www.cnblogs.com/iyangyuan/archive/20 ...
- css中table标签详解(一)
css中table标签详解(一) 什么是table标签,以及table标签的组成? 不叨叨,直接上代码 <table><tr><td></td>< ...
- css中position属性(absolute/relative/static/fixed)
css中position属性(absolute/relative/static/fixed): position:static 无特殊定位,是html元素默认的定位方式,对象遵循正常文档流.top ...
最新文章
- 标签view文字自动换行
- win10系统由于服务器出错翻译失败,win10系统下谷歌浏览器翻译失败如何解决
- mysql数据库的F5_windows下mysql每天定时备份数据库几种方法
- 9.NoSQL数据库第1部分
- 项目案例分享二:密码策略与上次交互式登录
- Qt 实现钢笔画线效果详细原理
- php的create_function、function_exists判断函数是否存在
- php 单例模式有什么缺点_PHP的完整形式是什么?
- C语言之指针的再次理解
- 「leetcode」111.二叉树的最小深度(与求最大深度还有所不同的)
- SaveRasterFile failed: IDLnaMetadata Error:naGetMetadata-GetMetadataJob failed
- 【路径规划】基于matlab遗传算法求解同时取送货车辆路径问题【含Matlab源码 1072期】
- JTAG Bypass命令案例解析
- IOS开发之——数据库-Couchbase(05)
- wifi信号正常,电脑插入网线之后,却显示“未识别网络”,
- python模拟按键网游_Python 实现键盘鼠标按键模拟
- 承接上篇 Logback 打印SQL配置
- 如何在vscode中优雅的编写C语言
- python之身份证号码的出生日期的提取与性别判段
- Jetpack Compose——Icon(图标)的使用
热门文章
- 安全公司发现雄迈数字摄像机的主控口令“已泄露”
- python 赚钱 知乎_2020年,小红书、知乎与B站谁能赚钱?
- cocos 节点坐标和世界坐标转换 个人理解与应用
- 【数学建模】 插值算法
- MATLAB 读取图片像素处理
- Unity编辑器拓展--Hierarchy拓展
- Verilog Language--Modules:Hierachy--Module add
- lol登录服务器时显示乱码,lol服务器变成乱码 | 手游网游页游攻略大全
- python模拟微信登录公众号_python通过手机抓取微信公众号
- Android调试萤石云摄像头时,出现400036错误