受绝对定位影响的一些 也许是“意想不到”的事情
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
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
但是，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
与上面相比，只是把.box元素的定位方式设置成了绝对定位position: absolute;，元素的宽度立马变宽了好多，所以可以看出此时子元素的宽度content其实是等于其父元素content+padding的宽度之和
此类好像与“直观感受”不符的现象其实在css里面有很多，我也遇到过很多，不过暂时没有总结过。以后再遇到这种问题时，不要过于纠结，浏览器显示什么就是什么，把不常规的现象记下来，再次遇到时就能很快得到自己想要的效果
网友评论