CSS - 定位
CSS 中的层级概念
- CSS中分为3层
最上层：定位元素层（position:relative、position:absolute、position:fixed）
中间层：浮动元素层（float:left、float:right）
最下层：普通元素层（未定位且未浮动）
- CSS中同一层元素的分层
同一层元素根据文档从上至下，后面的元素在前面元素的上面
1）定位元素层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin：0;
padding: 0;
}
.box1 {
width: 150px;
height: 150px;
position: absolute;
top: 0;
left: 0;
background-color: red;
}
.box2 {
width: 150px;
height: 150px;
position: absolute;
top: 0;
left: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
1）浮动元素层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin：0;
padding: 0;
}
.box1 {
width: 150px;
height: 150px;
float: left;
background-color: red;
}
.box2 {
width: 150px;
height: 150px;
float: left;
margin-left: -100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
3）普通元素层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin：0;
padding: 0;
}
.box1 {
width: 150px;
height: 150px;
display: inline-block;
background-color: red;
}
.box2 {
width: 150px;
height: 150px;
margin-left: -100px;
display: inline-block;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
定位元素
- 源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin：0;
padding: 0;
}
.box1 {
width: 150px;
height: 150px;
float: left;
margin-left: 100px;
background-color: red;
}
.box2 {
width: 150px;
height: 150px;
float: left;
margin-left: -50px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
</body>
</html>
- 实验1
在源代码基础上为 .box1 元素添加如下样式：
position: relative;
由上图可见， .box2 元素位置未改变，而原来在 .box2 下面的元素 .box1，现在在 .box2 元素上面了。但是其距离左边的距离还是没改变，仍是 100px（margin-left:100px ），因此 position: relative 提高了 .box1 元素层级的同时，保留了 .box1 元素原有位置，相当于 .box2 元素左侧仍有一个元素，这个元素占着 .box1 元素原来的位置。
再为 .box1 元素添加如下样式：
left: 150px;
由上图可见，.box2 元素位置未改变，而原来在 .box2 左侧的元素 .box1，现在偏移到 .box2 元素右侧了。其距离左边的距离变成了 250px（margin-left:100px + left:100px）。
- 实验2
在源代码基础上为 .box1 元素添加如下样式：
position: absolute;
left: 0;
top: 0;
由上图可见，原来在 .box2 下面的元素 .box1，现在在 .box2 元素上面了。而原来在 .box1 右侧的 .box2 元素，现在偏移到 .box1 元素左侧了，且其一部分被隐藏了。这是由于 position: absolute 提高了 .box1 元素层级的同时，不再保留 .box1 元素原有位置，此时 .box2 元素左侧没有了任何元素，再加上 .box2 元素的 margin-left: -50px; 属性，造成了 .box2 元素一部分没办法显示出来了。
元素是根据谁来定位的
元素的定位是根据该元素已定位的上级元素来定位的，若该元素的上级元素没有定位，则根据其已定位的上上级元素来定位，以此类推。若元素的所有上级元素都没有定位，则元素将根据浏览器窗口来定位。
- 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin：0;
padding: 0;
}
.box1 {
width: 200px;
height: 200px;
float: left;
background-color: red;
}
.box2 {
width: 150px;
height: 150px;
float: left;
background-color: yellow;
}
.box3 {
width: 50px;
height: 50px;
float: left;
background-color: black;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
</body>
</html>
首先，为 .box3 元素添加如下样式：
position: absolute;
right: 0;
bottom: 0;
此时由于 .box3 的上级元素都没定位，因此 .box3 偏移到了浏览器窗口右下角，由此可见，.box3 元素根据浏览器窗口来定位。
现在，为 .box2 元素和 .box1 元素都添加如下样式：
position: relative;
由上图可见，.box3 元素偏移到了 .box2 元素右下角，所以此时的 .box3 元素是根据 .box2 元素定位的。
接着，删除 .box2 元素的如下样式：
position: relative;
由上图可见，.box3 元素偏移到了 .box1 元素右下角，所以此时的 .box3 元素是根据 .box1 元素定位的。
