定位元素
相对于浮动元素,定位元素更加灵活。
设置定位元素
使用position属性来设置元素的定义
可选值:
- static 默认值 没有开启定位
- relative 开启相对定位
- absolute 开启绝对定位
- fixed 开启固定定位
相对定位元素的特点
- 元素不会脱离文档流
- 相对于该元素在文档流中的原位置进行定位的。
- 相对定位会使元素提升一个层级
- 相对定位不会改变元素的性质,块还是块元素,行内还是行内元素
绝对定位元素的特点
- 元素会完全脱离文档流
- 绝对定位会改变元素的性质,这个性质符合元素脱离文档流的性质。
- 开启绝对定位的元素在没有设置偏移量的情况下,元素位置不会发生变化
- 绝对定位元素相对于离它最近的开启了定位的祖先元素进行定位。如果所有祖先元素没有开启定位,那么它相对于初始包含块(html)进行定位。一般情况下,我们为一个元素开启绝对定位,同时也会为它的父元素开启相对定位
- 绝对定位会使元素提升一个层级
固定定位元素的特点
- 固定定位元素大部分特点与绝对定位元素一样
- 不同的是固定元素总是相对与浏览器可视窗口进行定位的,并且元素会固定在网页的视口上,不会随网页滚动而发生位置改变。
绝对定位元素的对齐方式
定位元素必须满足水平和垂直方向等式。
绝对定位元素水平方向布局等式
left + margin-left + padding-left + border-left + width + padding-rigth + boder-rigth + margin-right + rigth = 包含快的width
此时就有了5个值可以设置为auto :
- left
- rigth
- margin- left
- margin- right
- width
定位元素的水平居中:
- 定位元素不设置left和rigth默认值是auto,它会根据元素本来的位置进行偏移设置,使在不影响元素位置的情况下让等式成立。
- 如果想让定位元素居中显示,需要将margin-left和margin-right设置为auto,但是浏览器无法计算这两个外边距的值,需要将left和rigth设置为0,为了让等式成立,浏览器会将剩余的外边距平均划分给marign-left和margin-rigth;
- 定位元素垂直居中和水平居中一样必须满足等式
元素层级
开启定位元素都会提升一个层级,定位元素可以通过z-index来设置元素层级
z-index需要一个整数来作为参数,值越大层级越高
如果层级相同,在结构上后面的元素会覆盖前面的元素
注意:父元素层级再高,也不会覆盖子元素。