父盒子开启相对定位,且其中设置了一个子元素为绝对定位,再设置另一个子元素左浮动,却挤开了绝对定位的元素,而设置成右浮动,绝对定位的元素能盖住浮动的元素。(我是从设置绝对定位的元素的层级比浮动的层级高,所以认为左浮动的元素应该也会被绝对定位的元素盖住,而这里就算绝对定位的z-index设置较大时,也还是被左浮动元素挤走
)
目前只有提醒自己设置了绝对定位后,记得设置初始值来避免这种问题的产生了,具体原因分析不出来。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
position: relative;
margin: 100px auto;
width: 520px;
height: 280px;
background-color: pink;
}
.box1 .prev {
width: 200px;
height: 200px;
background-color: black;
float: left;
}
.box1 img {
position: absolute;
}
</style>
</head>
<body>
<div class="box1">
<a href="#"><img src="./tb.jpg" alt=""></a>
<div class="prev"></div>
</div>
</body>
</html>