Question

我正在尝试在图像上叠加菜单，但图像的容器是可变的。我不知道图像的位置或图像的大小。如何在不知道设置顶部，左侧坐标的位置的情况下，在图像上定位绝对/固定的东西？

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％。

感谢您的帮助。

Answer 1

考虑使用psedoclass来完成此任务。无论.foo的尺寸如何，内部叠加层都将覆盖整个区域。

＆＃13;

.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);
}

＆＃13;

<div class="foo"></div>

＆＃13;

如何使移动div内部有一个固定叠加元素？

1 个答案: