有时候兄弟 div 之间的遮蔽（或者说覆盖，重叠）是我们需要避免或者需要解决的问题，但是有时候也需要故意实现这种效果
缘起：今天因为工作，需要完成两个兄弟 div 互相遮蔽的效果，走了一些弯路，所以在这里记录一下，希望能给你一些帮助
-
需求很简单，可以简单用下图来表示：
image.png
-
需要实现的效果如下图：
image.png
-
实现过程分析：
实现这样的效果很快就会想起用position定位，最常用的是relative和absolute有句口诀是：子绝父相，意思是：父亲相对定位，孩子相对于父亲绝对定位，这样孩子就可以在父亲容器中定位实现需要的布局效果，但是现在div1div2是兄弟关系，而position:absolute的定位是相对于除了static定位以外的父元素进行定位的，并且div1宽高不能确定，所以只靠这两个div不太容易实现，那就可以给这两个div一个共同的父亲，父亲相对定位，div2相对父亲绝对定位，并且绝对定位的toprightbottomleft都为零，这样就完全覆盖了父亲，因为position:absolute会使元素脱离标准文档流，所以div2不会占用标准文档流的空间，所以div2盖住了父元素也就是盖住了div1，这样就实现了兄弟元素中div2对div1的全遮蔽效果 -
上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.parent {
position: relative;
}
.up {
background: red;
color: #fff;
}
.down {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #000;
opacity: 0.6
}
</style>
</head>
<body>
<div class="parent">
<div class="up">
我只是随意写的一些文字,用于将 div1 撑开,
我的多少决定了 div1 能被撑开多少,也就是 div1 的宽高由这些文字的多少来决定而不是给定的数值<br />
我只是随意写的一些文字,用于将 div1 撑开,
我的多少决定了 div1 能被撑开多少,也就是 div1 的宽高由这些文字的多少来决定而不是给定的数值<br />
我只是随意写的一些文字,用于将 div1 撑开,
我的多少决定了 div1 能被撑开多少,也就是 div1 的宽高由这些文字的多少来决定而不是给定的数值<br />
我只是随意写的一些文字,用于将 div1 撑开,
我的多少决定了 div1 能被撑开多少,也就是 div1 的宽高由这些文字的多少来决定而不是给定的数值<br />
我只是随意写的一些文字,用于将 div1 撑开,
我的多少决定了 div1 能被撑开多少,也就是 div1 的宽高由这些文字的多少来决定而不是给定的数值<br />
</div>
<div class="down">
</div>
</div>
</body>
</html>
- 实现效果如下如：
为了便于区分 div2 是否完全覆盖了 div1 在代码中用了 opacity 属性
image.png
你可以试着添加更多的文字，看看是否还会是完全覆盖的~~
网友评论