admin管理员组文章数量:1611399
文章目录
- 定位
- 偏移量(offset)
- 相对定位
- 绝对定位(常用)
- 包含块(containing block)
- 绝对定位元素的布局
- 固定定位
- 粘滞定位
- 元素的层级
定位
- 定位是一种高级的布局手段
- 通过定位可以将元素摆放在页面的任意位置
- 使用position属性来设置定位
- 可选值:
– static 默认值 元素是静止的没有开启定位
– relative 开启元素的相对定位
– absolute 开启元素的绝对定位
– fixed 开启元素的固定定位
– sticky 开启元素的粘滞定位
偏移量(offset)
- 当元素开启了定位以后,可以通过偏移量来设置元素的定位
– top
定位元素和定位位置上边框的位置
– bottom
定位元素和定位位置下边框的位置 - 定位元素垂直方向的位置由 top 和 bottom 两个属性决定,通常二选一。
– left
定位元素和定位位置左边框的位置
– right
定位元素和定位位置右边框的位置 - 定位元素水平方向的位置由 left 和 right 两个属性决定,通常二选一。
相对定位
- 当元素的position属性值设置为relative时则开启元素的相对定位
- 相对定位的特点:
– 1、元素开启相对定位以后,如果不设置偏移量元素不会发生任何改变。
– 2、相对定位时参照于元素在文档流中的位置
– 3、相对定位会提升元素的层级,会高于文档流中的元素
– 4、相对定位不会使元素拖离文档流
– 5、相对定位不会改变元素的性质(块依旧是块,行内依旧是行内)
原位置依旧独占一行
绝对定位(常用)
- 当元素的position属性值设置为absolute时,则开启元素的绝对定位
- 绝对定位的特点:
– 1、开启绝对定位以后,如果不设置偏移量元素,元素的位置不会发生变化
– 2、开启绝对定位后,元素从文档流中脱离
– 3、绝对定位会改变元素的性质,行内变成块,块的高度被内容撑开
– 4、绝对定位会使元素提升一个层级
包含块(containing block)
- 正常情况下:
– 包含块就是离当前元素最近的祖先块元素 - 绝对定位的包含块:
– 离它最近的开启了定位的祖先块元素
– 如果所有的祖先元素都没有开启,则相对于根元素定位 - html(根元素,初始包含块)
绝对定位元素的布局
- 水平布局
left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的内容区的宽度
当开启了绝对定位:
– 水平方向的布局等式就需要添加 left 和 right 两个值:
–此时规则与之前的一样,只是多了两个值
– 规则如下:
如果9个值中没有auto,且发生了过度约束(9个值相加不能满足等式)时,会自动调整 right 的值以达到等式成立。
如果 有auto ,则自动调整auto的值以使等式成立
可设置auto的值:margin 、width 、left、right
因为left 和right 值的默认值为auto,所以如果不指定 left 和 right 的值,等式不满足时,会自动修正这两个值。
- 垂直布局
- 垂直方向的等式也必须满足
top+ margin-top+ border-top+ padding-top+ width + padding-bottom+ border-bottom+ margin-bottom+ bottom= 包含块的内容区的高度
固定定位
- 将元素的position属性设置为 fixed 则开启了元素的固定定位
- 固定定位也是一种绝对定位,所以固定定位大部分特点与绝对定位一样
- 唯一不同的是,固定定位永远参考与浏览器的视口(可视区域)进行定位。
- 固定定位的元素不会随网页的滚动条滚动
粘滞定位
- 当元素的position属性设置为sticky时,则开启了元素的粘滞定位
- 粘滞定位和相对定位的特点基本一致
- 不同的是粘滞定位可以在元素到达某个位置时将其固定
元素的层级
- 当开启了定位元素,可以通过z-index 属性来指定元素的层级
- z-index 需要一个整数作为参数,值越大元素的层级越高
- 元素的层级越高越优先显示靠下的元素
- 祖先元素的层级再高也不会盖住后代元素
本文标签: Position
版权声明:本文标题:position定位:相对定位、绝对定位、固定定位、粘滞定位 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1728604172a1165242.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论