Question

我想像这样创建一个.cover div

<div style="position:relative;">
   <div class="cover" style="position:absolute;width:100%;height:100%;left:0;top:0;"></div>
</div>

但即使父元素不是定位元素（静态），它也可以实现类似的覆盖效果。简而言之，CSS样式会使div完全覆盖其静态定位的父级，而不会影响其余兄弟/孩子的流动？

Answer 1

请参阅Fiddle。你想尝试做这样的叠加吗？

<强> HTML

<div class="bacon"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do   eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>

<div class="chicken"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>

<div class="cover"></div>

<强> CSS

.cover {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background-color:#000;
opacity:0.8;
display:block;
z-index:1001; }

Answer 2

试一试：

style="height: inherit; width: inherit;"

inherit表示从父元素获取。 Read more。

CSS：绝对喜欢定位w.r.t静态元素

2 个答案: