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 应该适合你：&nbsp;.module {&nbsp; &nbsp; &nbsp;flex: 1;&nbsp; &nbsp; &nbsp;text-align: center;&nbsp; &nbsp; &nbsp;height: inherit;&nbsp; &nbsp; &nbsp;position: relative;&nbsp;}&nbsp;&nbsp;.module .shade {&nbsp; &nbsp; &nbsp;position: absolute;&nbsp; &nbsp; &nbsp;width: 100%;&nbsp; &nbsp; &nbsp;height: 100%;&nbsp; &nbsp; &nbsp;top: 0;&nbsp; &nbsp; &nbsp;left: 0;&nbsp; &nbsp; &nbsp;background: rgba(0,0,0,.6);&nbsp;}