绝对定位篇

position:absolute
  1. 无依赖绝对定位。

    当该元素没有设置top,right,bottom,left任意一个或者多个值时,该元素无任何影响,否则它会去寻找最近有position:relative属性的祖辈(没有则是body元素),并基于该祖辈定位。

  1. absolute的流体特征

  • 一般我们会根据阅读或者文档流的顺序(自上而下,从左到右)的需要,设置absolute的top,left就能达到定位效果。实际元素在被设置的方向上是“绝对定位”的特性,在另一个方向是保持着相对定位的特性。

  • 谈及流体特性,普通块级元素在水平方向是具有流体特性的,然而绝对定位的元素具有类似的流体特性,某些情况下比普通块级元素更强大。

  • absolute要实现自身的流体特性是有条件的,元素直接设置style=”position:absolute;margin:auto;“,外边距margin:auto属性是不会有任何计算的,那么如何让absolute元素拥有流体特性呢?条件是”对立方向同时发生定位“的时候。

  • 流体特性最显著的特点就是自动铺满流体方向上的空间 。

  1. 实现元素铺满屏幕

<style>
   /* 方法一 利用流体特性的流动性*/
   .son {
       position: absolute;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
  }
   
   /* 方法二 设置宽高 */
   .son {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%
  }
</style>

二者的效果虽然相同,但是原理是不一致的,后者设置了宽高,此时元素失去了流动性,此时元素尺寸已被计算,此时添加内边距,外边距会造成”宽高溢出的表现。

  1. 利用absolute实现水平垂直居中对齐

    <style>
       /* 方法一 */
       .foo {
           position: relative;
           width: 400px;
           height: 400px;
           background-color: lightseagreen;
      }

       .bar {
           position: absolute;
           top: 0;
           right: 0;
           bottom: 0;
           left: 0;
           margin:auto;
           width: 200px;
           height: 200px;
           background: #B03060;
      }
       
       /* 方法二 */
       .foo {
           position: relative;
           width: 400px;
           height: 400px;
           background-color: lightseagreen;
      }

       .bar {
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%)
           background: #B03060;
      }
       
       /* 方法三 */
       .foo {
           position: relative;
           width: 400px;
           height: 400px;
           background-color: lightseagreen;
      }

       .bar {
           position: absolute;
           margin-top: 50%;
           margin-left: 50%;
           transform: translate(-50%, -50%)
           background: #B03060;
      }
    </style>
    1. 定位元素对立方向只设置单属性值时,该元素具有包裹性,包裹性包括包裹和自适应。

    2. 方法1是需要给绝对定位的元素设置宽高,该元素居中是自适应的,而大小是固定的;

    3. 方法2,3不需要设置绝对定位元素的宽高,该元素位置,大小都是自适应的,但是自适应尺寸最大不能超过父亲内容尺寸的一半,强制设置大于父亲内容尺寸的一半会改变布局大小(chrome,Firefox的表现看不出来,ie11下的版本会有)

上一篇:CSS中的position属性


下一篇:position