在 CSS 中, 定位 (position) 属性用于规定元素的定位类型, 定义建立元素布局所用的定位机制. 下面给大家介绍一下 position 属性, 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
position 属性规定元素的定位类型.
说明
position 属性定义建立元素布局所用的定位机制. 任何元素都可以定位, 不过绝对或固定元素会生成一个块级框, 而不论该元素本身是什么类型. 相对定位元素会相对于它在正常流中的默认位置偏移.
默认值: static
继承性: no
语法:
position:static|relative|absolute|fixed|sticky|inherit|initial;
属性值:
值 | 描述 |
---|---|
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative | 生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
sticky | 粘性定位,该定位基于用户滚动的位置。 它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。 注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
initial | 设置该属性为默认值 |
position 属性常用值 (absolute,fixed,relative,sticky) 的区别
1,relative(相对定位)
元素相对自身的原位置偏移某个距离, 可能会覆盖其他元素; 占据空间, 元素的初始位置占据的空间会被保留, 表现为空白.
相对定位元素常常作为绝对定位元素的父元素. 并且定位元素经常与 z-index 属性进行层次分级
2,absolute(绝对定位)
原来的元素空间被删除, 新生成一个块级框, 与页面内容相对静止, 如果页面向下滑动, 该块级框会跟随向上运动
不占空间, 相对于最近的已定位的祖先元素, 有已定位 (指 position 不是 static 的元素) 祖先元素, 以最近的祖先元素为参考标准. 如果无已定位祖先元素, 以 body 元素为偏移参照基准.
所以, 父元素一般设置为相对定位
3,fixed(固定定位)
原来的元素空间被删除, 新生成一个块级框, 固定在页面的一个位置, 即使向下滑动页面, 该块级框依旧位置不改变
不占空间, 相对于视窗来定位, 这意味着即便页面滚动, 它还是会停留在相同的位置. 一个固定定位元素不会保留它原本在页面应有的空隙.
4,sticky(粘性定位)
1),static 表示没有定位, 或者说不算具有定位属性.
2), 如果元素 position 属性值为 static(或者未设 position 属性), 该元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). 设置 top,right,bottom,left 这些偏移属性不会影响静态定位的正常显示(设置这些属性没有用).
跟随页面一起滚动, 当超过阈值以后, 固定在页面边缘, 相当于 absolute 和 fixed 的混合
例如:
#one { position: sticky; top: 10px; }
在 viewport 视口滚动到元素 top 距离小于 10px 之前, 元素为相对定位. 之后, 元素将固定在与顶部距离 10px 的位置, 直到 viewport 视口回滚到阈值以下.
更多 CSS 相关知识, 可访问 CSS 教程 https://www.html.cn/css/ !!
来源: http://www.css88.com/qa/css3/15169.html