Html CSS：绝对式定位w.r.t静态元素

我想创建一个像这样的

.cover

div

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

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

试试看：

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

inherit

表示从父元素获取

请参阅。你想做这样的叠加吗

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>

---

使用

位置：相对
有什么问题？特别是由于
z-index
需要定位上下文。此div不应干扰其静态同级的位置。目前尚不清楚问题所在。仅仅添加
position:relative
而不添加其他值应该对兄弟姐妹没有影响。但是我实际上需要一个div，它可以完全覆盖其父级，而不管其父级的定位属性如何。这真的没有意义。从表面上看，这是不可能的。只需为父级设置
position:relative
，就可以解决问题。为什么这是一个问题？但是我希望
.cover
只包含它的父元素，它不能解决子w.r.t父元素的
位置的问题
.cover {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background-color:#000;
opacity:0.8;
display:block;
z-index:1001; }