//css
.box2{
width: 100%;
height: 100px;
background-color: black;
position: fixed;
top: 0;
left: 0;
}
.box3{
width: 100%;
height: 100px;
background-color: red;
margin-top: 200px;
}
//html
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div> according to the above code, you can see that box2 is not wrapped in box1 because of position:fixed :
box1padding: 0.1px(>0.1px)box2box1:
would like to ask why this is? Is there any way not to add padding to box1 and let box2 be wrapped in box1?? If not, how can box2 achieve the effect of fixing its head without using position:fixed ?