刚刚结束的项目里有一个很有意思的bug,我们常用如图这样的方式进行侧边栏的收缩隐藏和展示,右边的小按钮会是一个absolute的绝对定位,right定为负值
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
.parent-box{
width:150px;
height:600px;
border:1px solid gray;
position:relative;
}
.children-box{
width:20px;
height:40px;
border:1px solid gray;
position:absolute;
top:50%;
margin-top:-20px;
right:-22px;
}
</style>
</head>
<body>
<div class="parent-box">
<div class="children-box"></div>
</div>
</body>
</html>
而如果给父元素加一个overflow属性,就会出现问题
问题代码和图片如下:只是给parent-box加了一个overflow:auto;(因为项目的内容展示里涉及内容过多出现滚动条所以写这里的人加了一个overflow)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
.parent-box{
width:150px;
height:600px;
border:1px solid gray;
position:relative;
overflow:auto;
}
.children-box{
width:20px;
height:40px;
border:1px solid gray;
position:absolute;
top:50%;
margin-top:-20px;
right:-22px;
}
</style>
</head>
<body>
<div class="parent-box">
<div class="children-box"></div>
</div>
</body>
</html>
当我们要在这里加一个收起的小按钮的时候我按照正常思路写完发现布局完全不对,很疑惑,最终发现是overflow的问题的时候觉得很有意思就记录一下