position之absolute的相关问题
position一共有五个值
- static，默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
- relative，生成相对定位的元素，相对于其正常位置进行定位。因此，”left: 20” 会向元素的 LEFT 位置添加 20 像素。
- absolute，生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。（一般都是相对于relative定位的祖先元素进行position定位。）
- fixed，生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。（无论窗口怎么滚动，它都会固定在那个位置。）
- inherit，规定应该从父元素继承 position 属性的值。
重点考察absolute
①当父元素设置了除static定位之外的定位时，相对于父元素的哪里定位呢？这个时候，基准是父元素的内容区，也就是padding + content的区域，不包括border和margin。
②当父元素没有设置定位时，子元素相对于body元素进行定位。
③子元素定位的边界包括子元素的整体，也就是margin + border + padding + content。
第一种情况：设置了absolute定位，却没有设置top，left，bottom或right值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 1000px;
height: 500px;
background-color: pink;
overflow: hidden;
position: relative;
/*这行代码解决垂直外边距塌陷问题*/
}
.one {
width: 500px;
height: 200px;
border: 10px solid black;
background-color: green;
position: relative;
}
.two {
width: 100px;
height: 100px;
background-color:yellow;
position: absolute;
border: 10px solid red;
}
</style>
</head>
<body>
<div class="box">
<div class="one">
<div class="two"></div>
</div>
</div>
</body>
</html>如上所示，.two的div设置了absolute定位，却没有设置top，left，bottom或right值，那么该div就如static定位一样，随波逐流。
第二种情况：设置了absolute定位，也设置了left，top值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 1000px;
height: 500px;
background-color: pink;
overflow: hidden;
position: relative;
/*这行代码解决垂直外边距塌陷问题*/
}
.one {
width: 500px;
height: 200px;
border: 10px solid black;
background-color: green;
position: relative;
}
.two {
width: 100px;
height: 100px;
background-color:yellow;
position: absolute;
left: 10%;
/*此时left取值是 left = 500*10% = 50px */
top:10%;
/*此时top取值是 top = 200*10% = 20px */
border: 10px solid red;
}
</style>
</head>
<body>
<div class="box">
<div class="one">
<div class="two"></div>
</div>
</div>
</body>
</html>如上所示，此时，top和left都是以百分数来表示，此时是相对于非static定位的祖先元素的宽高度来计算的，也就是top = 百分数 * （非static定位的祖先元素的高度），left = 百分数 * （非static定位的祖先元素的宽度）。
其实，如果此时定位为absolute的元素，将width，height也用百分数来表示，那么，width = 百分数 * （非static定位的祖先元素的宽），height = 百分数 * （非static定位的祖先元素的高）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 1000px;
height: 500px;
background-color: pink;
overflow: hidden;
position: relative;
/*这行代码解决垂直外边距塌陷问题*/
}
.one {
width: 500px;
height: 200px;
border: 10px solid black;
background-color: green;
position: relative;
}
.two {
width: 50%;
/*此时width取值是 width = 500 * 50% = 250px */
height: 50%;
/*此时height取值是 height = 200 * 50% = 100px */
background-color:yellow;
position: absolute;
left: 10%;
/*此时left取值是 left = 500*10% = 50px */
top:10%;
/*此时top取值是 top = 200*10% = 20px */
border: 10px solid red;
}
</style>
</head>
<body>
<div class="box">
<div class="one">
<div class="two"></div>
</div>
</div>
</body>
</html>第三种情况，相对于body元素进行定位
当一个元素的position属性设置为absolute后，如果这个元素的祖先元素中没有除了static定位之外的定位，那么这个元素就要相对于body元素进行定位，此时top、left、width和height以百分数表示时，所根据的都是页面视口的宽度和高度，也就是：top = 百分数 * 页面视口高度（document.documentElement.clientHeight），width = 百分数 * 页面视口高度（document.documentElement.clientHeight），left = 百分数 * 页面视口宽度（document.documentElement.clientWidth），width = 百分数 * 页面视口宽度（document.documentElement.clientWidth）。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
width: 600px;
height: 600px;
}
.div1 {
width: 500px;
height: 500px;
background: #0f0;
}
.div2 {
position: absolute;
top: 30%;
left: 30%;
width: 30%;
height: 30%;
background: #f00;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
<script>
alert(document.documentElement.clientWidth);
alert(document.documentElement.clientHeight);
</script>
</body>
</html>打开浏览器查看器时，absolute定位的元素的布局视图如下图所示：
在以上代码中，将top和height的百分数设置为相等，left和width的百分数设置为相等，耳聪布局视图中也可发现，确实也是相等的，分别为148.8px和570.9px，此时的页面视口高度和宽度分别为1903px和496px，可以计算一下此时元素的布局视图，可以证明top、left、width和height以百分数表示时，所根据的是页面视口的宽度和高度。要注意的是，我在上面代码中，将body的宽高都设置为600px，然而top、left、width和height并没有依据它来设置自己的值。
下一篇： CSS深入理解之absolute