gpt4 book ai didi

html - 如何让一个移动的 div 里面有一个固定覆盖的元素?

转载 作者:太空宇宙 更新时间:2023-11-04 10:17:37 25 4
gpt4 key购买 nike

我正在尝试将菜单覆盖在图像上,但图像的容器是可变的。我不知道图像将在哪里或有多大。我如何在不知道在哪里设置左上角坐标的情况下将绝对/固定的东西定位在图像上?

body {
box-sizing: border-box;
border: 0;
padding: 0;
}
.main-container {
height: 500px;
width: 100%;
background-color: #282828;
padding: 0;
}
.moving-container {
display: inline-block;
margin-top: 100px;
background-color: red;
width: 100%;
height: 100px;
}
.content {
z-index: 1;
width: 100%;
height: 50%;
background-color: white;
}
.overlay {
z-index: 2;
width: 300px;
height: 150px;
background-color: blue;
}

<body>
<div class="main-container">
<div class="moving-container">
<div class="content">

</div>
<div class="overlay">

</div>
</div>
</div>
</body>

这是一个 example that doesn't work .您可以看到作为叠加对象的蓝色边框框如何被推到白色全跨度 div 下方。

如果我使用绝对位置,但是或固定位置,我得到 this .

我尝试将图像设置为元素的背景,然后元素内部将成为菜单,但不知道元素有多大,例如。一个固定的 px 值,背景图像将不会出现(比菜单本身大)。

那我该怎么办?我遇到过翻译,但我以前没有实现过。

在上面的示例中,我有一个固定的高度尺寸来处理宽度仅为 100% 的地方。

感谢您的帮助。

最佳答案

考虑使用伪类来完成此任务。无论 .foo 的尺寸是多少,内部覆盖层都会覆盖整个区域。

.foo {
background: lightgray;
width: 150px;
height: 150px;
position: relative;
}

.foo::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
display: block;
background: rgba(255, 0, 0, 0.5);
}
<div class="foo"></div>

关于html - 如何让一个移动的 div 里面有一个固定覆盖的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37109739/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com