时间戳

首页 > 解决方案 > Flexbox 继承问题

javascript - Flexbox 继承问题

问题描述

我正在建立一个简单的网站。我有充满“模块”的弹性框，其中包含文本内容。当其中一个模块悬停在上面时（使用未包含在这篇文章中的 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;
 }
 
 .module .content p {
     font-size: 1.5rem;
     padding: 0 3rem 0 3rem;
 }
 
 .module .shade {
     position: absolute;
     background: rgba(0,0,0,.6);
 }
 
 .shade .source_btn {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 20%;
     height: 20%;
     font-size: 2vw;
     background: var(--background);
     color: var(--accent);
     border: 2px solid var(--accent);
     border-radius: .5rem;
 }

请注意，如果我将 .shade 样式更改为：

.module .shade {
     position: absolute;
     background: rgba(0,0,0,.6);
     width: 33.33333%;
     height: 60vh;
 }

如果有 3 个模块，我会得到确切的预期效果。我相信这意味着宽度和高度是从其他地方继承的，我不知道为什么。我需要能够在 .shade 样式中说width: 100%，height: 100%以使阴影占据整个模块，因为每个支持类会有不同数量的模块。

我很困惑为什么宽度和高度没有像我期望的那样被继承。既然 .shade 是 .module 的子级，为什么不继承 .module div 的宽高呢？

如果我可以提供任何其他信息，请告诉我。我会主动的。

标签： javascripthtmlcsswebinheritance

解决方案

当您设置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);
 }

推荐阅读