在 CSS 中, 可以使用 position 属性来定位元素. 下面本篇文章就来给大家介绍一下 position 属性, 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
position 属性规定元素的定位类型.
这个属性定义建立元素布局所用的定位机制. 任何元素都可以定位, 不过绝对或固定元素会生成一个块级框, 而不论该元素本身是什么类型. 相对定位元素会相对于它在正常流中的默认位置偏移.
属性值:
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 (查看以下实例).
CSS 定位的应用及注意事项
相对定位(position: relative):
如果对某一个元素进行相对定位, 它将出现在它所在的位置上. 然后, 可以通过设置垂直 (或水平) 位置(top,right,bottom,left 四值), 让这个元素 "相对于" 它的起点进行移动.
注: 设置为相对定位的元素框会偏移某个距离. 元素仍然保持其未定位前的形状, 它原本所占的空间仍保留;
绝对定位(position: absolute):
绝对定位使元素的位置与文档流无关, 所以不会占用空间. 与相对定位不同, 相对定位实际上被看作普通流定位模型的一部分, 因为元素的位置相对于它在普通流中的位置. 注: 设置为绝对定位的元素框从文档流完全删除, 并相对于其包含块定位, 包含块可能是文档中的另一个元素或者是初始包含块. 元素原先在正常文档流中所占的空间会关闭, 就好像该元素原来不存在一样. 元素定位后生成一个块级框, 而不论原来它在正常流中生成何种类型的框;
更多 CSS 相关知识, 可访问 CSS 教程 https://www.html.cn/css/ !!
来源: http://www.css88.com/qa/css3/15029.html