1.什么是定位元素?
- 就是元素的position属性值为:
fixed
,absolute
,relative
三其者之一,则为定位元素。 - 那么
static
的元素呢?为常规流元素。网页布局中,元素的排列方式一般三种,常规流,浮动,定位
2.absolute
元素的特点
- 其元素的最大宽度是其
包含块的宽度(离他最近的定位的父元素的宽度)
- top,left等定位属性是
相对于包含块的padding定位
的。 - 还有一个非常重要的特性:
具有相对特性的无依赖绝对定位
。这个本质:就是设置元素position:absolute
后,再设置margin属性
。而不设置top,left
等定位属性。(这里的相对是相对于自己的初始位置进行定位。个人理解:就是设置margin属性之前的位置) - 该元素变为块盒,即display值为block。
- 不设置width值,并且left,right设置值为0时,该定位元素宽度撑满整个父容器。height如果不设置,并且top,bottom为0时,该定位元素高度会占据整个父容器高度
- 通过设置元素如下属性,实现网页布局水平、垂直居中。:
- 当z-index为负值,遇到常规流和浮动元素,会被其覆盖。
- 一定不是浮动元素。
绝对定位优先级比浮动高
。 - 无外边距合并。
3.absolute和overflow元素关系
- 如果overflow所在元素同时也是定位元素,里面的绝对定位元素会被裁剪。
- 如果overflow所在元素为定位元素父级元素,并且,他们之间还存在其他定位元素,那么该定位元素会被裁剪。
(上述两点我的理解就是:overflow元素如果处在常规流中,那么必须能约束到绝对定位元素的包含块才行。或者本身变为定位元素那么就能约束到绝对定位元素)