absolute定位元素的特点

1.什么是定位元素?

  • 就是元素的position属性值为:fixedabsoluterelative三其者之一,则为定位元素。
  • 那么static的元素呢?为常规流元素。网页布局中,元素的排列方式一般三种,常规流,浮动,定位

2.absolute元素的特点

  • 其元素的最大宽度是其包含块的宽度(离他最近的定位的父元素的宽度)
  • top,left等定位属性是相对于包含块的padding定位的。
  • 还有一个非常重要的特性:具有相对特性的无依赖绝对定位。这个本质:就是设置元素position:absolute后,再设置margin属性。而不设置top,left等定位属性。(这里的相对是相对于自己的初始位置进行定位。个人理解:就是设置margin属性之前的位置
  • 该元素变为块盒,即display值为block。
  • 不设置width值,并且left,right设置值为0时,该定位元素宽度撑满整个父容器。height如果不设置,并且top,bottom为0时,该定位元素高度会占据整个父容器高度
  • 通过设置元素如下属性,实现网页布局水平、垂直居中。:
    absolute定位元素的特点_第1张图片
  • 当z-index为负值,遇到常规流和浮动元素,会被其覆盖。
  • 一定不是浮动元素。绝对定位优先级比浮动高
  • 无外边距合并。

3.absolute和overflow元素关系

  • 如果overflow所在元素同时也是定位元素,里面的绝对定位元素会被裁剪。
  • 如果overflow所在元素为定位元素父级元素,并且,他们之间还存在其他定位元素,那么该定位元素会被裁剪。
    (上述两点我的理解就是:overflow元素如果处在常规流中,那么必须能约束到绝对定位元素的包含块才行。或者本身变为定位元素那么就能约束到绝对定位元素)

你可能感兴趣的:(css,css)