受绝对定位影响的一些也许是“意想不到”的事情

2018-06-21 本文已影响0人饥人谷_bigJiao

受绝对定位影响的一些也许是“意想不到”的事情

css定位是css最重要的知识点之一，页面布局很是仰仗它。然而最近在做一个小测试时发现了一些与“常识”和“直觉”不符的现象，把它写出来，便于自己以后记忆。

首先回顾一下css的几种定位方式，具体见下表：

值	属性
inherit	规定应该从父元素继承 position 属性的值
static	默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
relative	生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px 会向元素的 left 位置添加20px
absolute	生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）(的内边框)进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定
sticky	CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置

1.绝对定位到底是相对于哪里定位的

从上表可以看出，绝对定位即postion:absolute相对于static定位以外的第一个祖先元素（offset parent）(的内边框)进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定，当其所有祖先元素都是static定位时，它就相对于根元素进行定位。按照我们一般的想法，此时绝对定位的元素应该也是相对于其根元素（即html元素）的内边框进行定位的，但是事实缺不禁其然，事实上，它是相对于根元素的边框最外围进行定位的。。。测试见下面的demo

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    html{
      border: 30px solid yellow;
      height: 500px;
      width: 600px;
    }
    .box{
      border: 3px solid ;
      width: 100px;
      height: 100px;
      position: absolute;
      top: 0px;
      left: 0; 
    }
    .ct{
      margin-top: 100px;
      border: 20px solid red;
      height: 300px;
      position: relative;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  
  <div class="ct">
    <div class="box"></div>
  </div>
</body>
</html>

b1-1.PNG

demo

2.子元素为绝对定位时候的宽度问题

我们经常遇到需要把一个元素的宽度设置为100%的场景，一般情况下，该场景下此元素content的宽度等于其父元素content的宽度，比如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  
  <style>
    .ct{
      width: 200px;
      border: 20px solid red;
      height: 300px;
      position: relative;
      padding: 20px;
    }

    .box{
      border: 20px solid ;
      width: 100%;
      height: 100px;  
    }
  </style>
</head>
<body>
  
  <div class="ct">
    <div class="box"></div>
  </div>
</body>
</html>

b1-2.PNG

demo

但是，but......当该元素为绝对定位时，会发生一些微妙的变化,比如

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .ct{
      width: 200px;
      border: 20px solid red;
      height: 300px;
      position: relative;
      padding: 20px;
      position: relative;
    }
    
    .box{
      border: 20px solid ;
      width: 100%;
      height: 100px;
      position: absolute;  
    }
  </style>
</head>
<body>
  
  <div class="ct">
    <div class="box"></div>
  </div>
</body>
</html>

b1-3.PNG

demo

与上面相比，只是把.box元素的定位方式设置成了绝对定位position: absolute;，元素的宽度立马变宽了好多，所以可以看出此时子元素的宽度content其实是等于其父元素content+padding的宽度之和

此类好像与“直观感受”不符的现象其实在css里面有很多，我也遇到过很多，不过暂时没有总结过。以后再遇到这种问题时，不要过于纠结，浏览器显示什么就是什么，把不常规的现象记下来，再次遇到时就能很快得到自己想要的效果

受绝对定位影响的一些也许是“意想不到”的事情