position
定位
1. / relative 相对定位。
（1）它并没有什么用（它不会改变标签的任何状态）。
（2）当子集有绝对定位 而又不改变其原有的排列方式/。
2. /absolute 绝对定位。
（1）当父级元素有定位属性时相对于父级元素。
（2）当父级元素没有定位属性时向更高一级查找，直到找到定位属性或absolutebody为止。
（3）同级元素之间互不干扰。
3. position: fixed;/固定定位,永远相对于body/
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box1,.box2{
width: 200px;
height: 200px;
}
.box1-1,.box2-1{
width: 100px;
height: 100px;
}
.box1{
background-color: palegoldenrod;
/*relative 相对定位
1.它并没有什么用（它不会改变标签的任何状态）
2.当子集有绝对定位 而又不改变其原有的排列方式*/
position:relative;
}
.box1-1{
background-color: blue;
/*absolute 绝对定位
1.当父级元素有定位属性时相对于父级元素
2.当父级元素没有定位属性时向更高一级查找，
直到找到定位属性或absolutebody为止
3.同级元素之间互不干扰*/
position: absolute;
top: 0;
left: 0px;
}
.box2{
background-color: paleturquoise;
position: relative;
height: 2000px;
}
.box2-1{
background-color: pink;
position: fixed;/*固定定位,永远相对于body*/
top: 0;
left: 300px;
}
</style>
</head>
<body>
<!--<div style="background-color: palegoldenrod; width: 200px; height: 200px;">
<div style="background-color: paleturquoise;width:100px;height: 100px;">
</div>
</div>
<div style="background-color: palegreen;width: 200px;height: 200px;">
<div style="background-color: palevioletred;width: 100px;height: 100px;">
</div>
</div>-->
<div class="box1">box1
<div class="box1-1">
box1-1
</div>
</div>
<div class="box2">box2
<div class="box2-1">
box2-1
</div>
</div>
</body>
</html>
效果展示
解释
- box1是相对定位，不会改变标签的任何状态；当子级有绝对定位时，不改变原有的排列方式。
- box1-1是绝对定位，因为它的父级元素（box1）有定位属性，所以是相对于box1的。
- box2也是相对定位。
- box2-1是固定定位，是相对于body的，固定定位永远相对于body。
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
