所以我需要一個(gè)覆蓋其整個(gè)父級(jí)的 div。（需要位于事件監(jiān)聽(tīng)的前面，因此z-index需要高于父級(jí)。）如果父級(jí)沒(méi)有固定大小，我該怎么辦？例如： 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 回答
尚方寶劍之說(shuō)
TA貢獻(xiàn)1788條經(jīng)驗(yàn) 獲得超4個(gè)贊
所以我需要一個(gè)覆蓋其整個(gè)父級(jí)的 div。（需要位于事件監(jiān)聽(tīng)的前面，因此z-index需要高于父級(jí)。）
如果父級(jí)沒(méi)有固定大小，我該怎么辦？
例如： 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)注
- 183 瀏覽
添加回答
舉報(bào)
0/150
提交
取消