CSS之深刻探究Position

时间 2019-11-29

标签 css 深刻探究 position 栏目 CSS 繁體版

原文原文链接

这些天从新整理之前的代码，想对其进行优化，却出现了不少问题，其中一个就是Position，中间本身停下优化代码的工做，特地停下来深刻研究了一下Position。如今来分享一下本身的体会吧！

首先咱们从定义来理解一下Position的几个属性吧

static 这个是容器默认值，没有定位，出如今正常文档流中。
absolute 这个是绝对定位，若是没有设置TRBL，则相对于父容器的左上角，若是设置了TRBL则是相对于上一个设置了absolute，relative，fixed的祖辈容器的左上角（Ps：这一点你们要注意，虽然有点绕，可是不少讲position的文章都没提到这个），多是他的父容器，也多是父容器的父容器，以此类推，直到找到祖辈当中有一个设置了Postion为absolute，relative，fixed的。若是找到顶层都没有，那么就是相对于文档的根元素。
relative相对于其正常位置进行定位，可是离开这个位置后，仍是会占据原来的空间，只是咱们看到的效果是移开了。
fixed 相对于浏览器的左上角，位置固定不变。
inherit 继承父元素的position。

以上是根据我本身所理解的和看的一些教程来定义的几个属性，而后咱们来看一下Demo吧

这里的demo我只是举一下absolute的例子，由于fixed和relative都比较好理解，就没必要多说。css

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
div{border:2px red solid;}
body{background-color: #999;}
#box1{
  width: 400px;
  height: 400px;
  padding: 20px;
  background-color: #444;
  margin-left: 100px;
  margin-top: 100px;
}
#box2{
  width: 300px;
  height: 300px;  
  background-color: #777;
  position: absolute;
  
}
</style>
</head>

<body>
<div id="box1"> 
    <div id="box2">
        
    </div>  
</div>
</body>
</html>

效果
html

这个就是未设置TRBL时效果。接着咱们设置一下TBRL来看看，更改一下代码浏览器

#box2{
  width: 300px;
  height: 300px;  
  background-color: #777;
  position: absolute;
  top:50px;
  left:50px;
}

效果：
布局

这个box2就是相对于根元素来定位的。由于它的祖辈容器中没有一个设置了postion的。接着咱们在box1中添加position: relative;post

#box1{
  width: 400px;
  height: 400px;
  padding: 20px;
  background-color: #444;
  margin-left: 100px;
  margin-top: 100px;
  position: relative;
}

效果：

以上三种状况就简明解释了absolute的一些特性。优化

接着我要说的一点就是：当一个元素被定位absolute以后，那么这个元素就算是上天了，此话怎讲，就是这个元素咱们只是看得见，可是不存在于文档流中，它后面的其余元素会和它重叠，被他遮住。这一点十分重要。这也是我本身进行代码重构的时候遇到的问题。好比这样，咱们把以前的代码后面添加一段文字。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
div{border:2px red solid;}
body{background-color: #999;}
#box1{
  width: 400px;
  height: 400px;
  padding: 20px;
  background-color: #444;
  margin-left: 100px;
  margin-top: 100px;
  position: relative;
}
#box2{
      width: 300px;
      height: 300px;  
      background-color: #777;
      position: absolute;
      top:50px;
      left:50px;
    }
</style>
</head>

<body>
<div id="box1"> 
    <div id="box2">
        
    </div>  
    <p>这是一段文字，若是看不见我就说明我被遮住了，或者被遮住一部分。</p>
</div>
</body>
</html>

因而可知，这段p文字根本不受box2的影响了，就好像box2漂浮在空中同样，因此我会说它上天了。

总结：

postion定位有static，fixed，relative，absolute，inherit五种
其中absolute最为麻烦，咱们分了三种状况来讨论
而absolute之因此会出现前一项的三种状况也是由于他的本质：一旦一个元素被设置为absolute的话，那么它就上天了。不存在与文档流中。