Flexbox继承问题

Question

我正在建立一个简单的网站。我有充满“模块”的弹性盒子，其中包含文本内容。当这些模块之一悬停在上面时（使用本文未包含的 JavaScript 代码，因为它工作正常），我希望出现一个“阴影”，它使整个模块变暗并显示一个按钮。我在将阴影设置为正确的尺寸时遇到了很多麻烦：每个模块宽度和高度的 100%。由于某种原因，高度和宽度不会从模块继承到阴影。HTML：<div class="support">    <div class="module">        <div class="shade">            <a href="#"><button type="button" class="source_btn">View Source</button></a>        </div>        <div class="content">            <h1>Homocide rates have skyrocketed in the United States.</h1>            <p>Jeffery Miron, an economist estimates that the homicide rate in America is as much as seventy-five percent higher $        </div>    </div>    <div class="module">        <div class="shade">            <a href=""><button type="button" class="source_btn">View Source</button></a>        </div>        <div class="content">            <h1>Drug markets are forced to solve their disputes through violence.</h1>            <p>Because the War on Drugs has forced drug markets into the shadows, there is now way they can settle disputes throu$        </div>     </div>    <div class="module">        <div class="shade">            <a href=""><button type="button" class="source_btn">View Source</button></a>        </div>        <div class="content">            <h1>The violence is not only occurring in the United States.</h1>            <p>For some perspective, there have been almost one hundred thousand deaths in Mexico in the past decade caused not b$        </div>    </div></div>CSS： section .support {     display: flex;     flex-direction: row;     background: var(--bg);     height: 60vh; } .module {     flex: 1;     text-align: center;     height: inherit; } .module .content h1 {      margin-top: 5rem;     margin-bottom: 5rem;     font-size: 2.5rem; }如果有 3 个模块，我就能得到确切的预期效果。我相信这意味着宽度和高度是从其他地方继承的，我不知道为什么。我需要能够在 .shade 样式中说width: 100%and以使阴影占据整个模块，因为每个支持类会有不同数量的模块。height: 100%我很困惑为什么宽度和高度没有像我期望的那样被继承。既然 .shade 是 .module 的子级，为什么宽度和高度不继承自 .module div 呢？

Answer 1

当您设置absolute为 的值时position，该元素的父元素应具有relative的值position。否则，子元素无法测量其父元素的位置和大小。

以下 css 应该适合你：

 .module {

     flex: 1;

     text-align: center;

     height: inherit;

     position: relative;

 }

 

 .module .shade {

     position: absolute;

     width: 100%;

     height: 100%;

     top: 0;

     left: 0;

     background: rgba(0,0,0,.6);

 }