最近在写东西的时候,我发现sticky失效的,找了老半天找到了原因。
(1)我们知道float
是使得div
悬浮,悬浮之后元素的父元素在不设置height
的情况下其height
为0px。如下的情况就会使得sticky
失效。
<!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>
.a{
height: 100px;
background-color: tomato;
position: sticky;
top: 0;
}
.b{
width: 400px;
margin: 0 auto;
background-color: darksalmon;
}
.c{ // 因为c 设置了float,使得b没有了height,所以sticky失效
float: left;
}
.f{
height: 100px;
width: 400px;
background-color: cadetblue;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b">
<div class="c">
<div class="f"></div>
<div class="f"></div>
<div class="f"></div>
<div class="f"></div>
<div class="f"></div>
<div class="f"></div>
</div>
</div>
</body>
</html>
(2)当我们不设置float
后,sticky
就会生效,如下:
<!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>
.a{
height: 100px;
background-color: tomato;
position: sticky;
top: 0;
}
.b{
width: 400px;
margin: 0 auto;
background-color: darksalmon;
}
.c{ // 因为c 没有设置了float,使得b有了height,所以sticky生效效
/* float: left; */
}
.f{
height: 100px;
width: 400px;
background-color: cadetblue;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b">
<div class="c">
<div class="f"></div>
<div class="f"></div>
<div class="f"></div>
<div class="f"></div>
<div class="f"></div>
<div class="f"></div>
</div>
</div>
</body>
</html>
知道这个原因你就可以根据自己的情况进行适当的调整,只要sticky
有不悬浮的标签
,sticky
就可以生效。