2025-2-3-定位
定位
这个问题需要注意的就是父级元素同样设置定位的话，在里边设置定位的子集元素会跟随父级元素，因为子集元素的边界会变成父级元素
z-index，可以通过设置数值来进行层级的先后定义，按照值由小到大层级由低到高
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.box1{
/* 相对定位，不会脱离文档流，我们可以看到相同的两个仍旧按照之前的排列,未设置定位的一个也没有被覆盖*/
width: 100px;
height: 100px;
background-color: red;
position: relative;
left: 100px;
top: 100px;
}
.box2{
/* 相对定位,会脱离文档流，也就是会发生覆盖，我们可以在示例中相同定位的两个2是覆盖1的
每设置一个定位都会增加一层，1会覆盖未脱离的，2会覆盖1，以此类推*/
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 300px;
top: 100px;
}
.box3{
width: 100px;
height: 100px;
background-color: red;
margin: 100px 100px;
}
.box4{
/*固定定位，同样脱离文档流，我们可以看到2会覆盖1
与其它定位不同的是固定定位是固定的，他不会随着页面滚动而改变在页面中的位置*/
width: 100px;
height: 100px;
background-color: red;
position:fixed;
right: 100px;
bottom: 100px;
}
/*这是设置在相对定位1里的子集定位
我们可以看到它的边界已经不是页面边界了，而是以相对定位1的左跟上为边界来进行定位、
这就是相对定位跟绝对定位需要注意的问题，固定定位无此问题*/
.ppp{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 10px;
top: 10px;
}
/*z-index属性展示*/
.box5{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 10px;
top: 10px;
z-index: 100;
}
.box6{
width: 50px;
height: 50px;
background-color: pink;
position: absolute;
left: 10px;
top: 10px;
z-index:60;
}
</style>
<body>
<div class="box1">相对定位1
<div class="ppp"></div>
</div>
<div class="box1">相对定位2</div>
<div class="box3">定位</div>
<div class="box2">绝对定位1</div>
<div class="box2">绝对定位2</div>
<div class="box4">固定定位1</div>
<div class="box4">固定定位2</div>
<!--z-index,我们可以很轻易的知道pink是会覆盖在green上方的
通过设置z-index的值我们可以将覆盖关系调换，也就是改变层级,按照值由小到大从低到高层-->
<div class="box5">green</div>
<div class="box6">pink</div>
</body>
</html>
浙公网安备 33010602011771号