所以我需要一個覆蓋其整個父級的 div。（需要位于事件監(jiān)聽的前面，因此z-index需要高于父級。）如果父級沒有固定大小，我該怎么辦？例如： https: //jsfiddle.net/CypherK/hdgko1L4/<div class="container"> <div class="content"><!-- should be however big the container is--> <div class = "mask"></div> <!-- should be in front of the entire content --> </div></div>.container { height: 3em; width: 50%; /*could be anything*/ border: 1px solid green;}.content { height: 1em; width: 100% - 6px; /*intention: as big as container, minus own borders*/ border: 3px dashed blue;}.content .mask { position: absolute; z-index: 99; height: calc(100% + 6px); /*intention: as big as content, including its borders*/ width: calc(100% + 6px); /*intention: as big as content, including its borders*/ margin: -3px; /*intention: place on border of parent*/ border: 2px dotted red;}
1 回答
尚方寶劍之說
TA貢獻1788條經(jīng)驗 獲得超4個贊
所以我需要一個覆蓋其整個父級的 div。（需要位于事件監(jiān)聽的前面，因此z-index需要高于父級。）
如果父級沒有固定大小，我該怎么辦？
例如： https: //jsfiddle.net/CypherK/hdgko1L4/
<div class="container">
<div class="content"><!-- should be however big the container is-->
<div class = "mask"></div> <!-- should be in front of the entire content -->
</div>
</div>
.container {
height: 3em;
width: 50%; /*could be anything*/
border: 1px solid green;
}
.content {
height: 1em;
width: 100% - 6px; /*intention: as big as container, minus own borders*/
border: 3px dashed blue;
}
.content .mask {
position: absolute;
z-index: 99;
height: calc(100% + 6px); /*intention: as big as content, including its borders*/
width: calc(100% + 6px); /*intention: as big as content, including its borders*/
margin: -3px; /*intention: place on border of parent*/
border: 2px dotted red;
}
- 1 回答
- 0 關(guān)注
- 164 瀏覽
添加回答
舉報
0/150
提交
取消