CSS之深入探究Position
2016-08-26 本文已影响73人
PengL
这些天重新整理以前的代码，想对其进行优化，却出现了很多问题，其中一个就是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都比较好理解，就不必多说。我们来理清一下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;
}
#box2{
width: 300px;
height: 300px;
background-color: #777;
position: absolute;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
</div>
</div>
</body>
</html>
效果
这个就是未设置TRBL时效果。接着我们设置一下TBRL来看看，更改一下代码
#box2{
width: 300px;
height: 300px;
background-color: #777;
position: absolute;
top:50px;
left:50px;
}
效果：
这个box2就是相对于根元素来定位的。因为它的祖辈容器中没有一个设置了postion的。接着我们在box1中添加position: relative;
#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的话，那么它就上天了。不存在与文档流中。
