我正在建立一个简单的网站。我有充满“模块”的弹性盒子,其中包含文本内容。当这些模块之一悬停在上面时(使用本文未包含的 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 呢?
1 回答
一只甜甜圈
TA贡献1836条经验 获得超5个赞
当您设置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);
}
添加回答
举报
0/150
提交
取消