html - css 试图覆盖 div

Question

我尝试布局以下 View ，但找不到实现此目的的方法，我需要以这种方式覆盖 2 个 div:

为此，我有以下 HTML 并尝试使用此 CSS:

.general {
  @apply --layout-flex;
  width: 300px;
  height: 300px;
}

.toolbar {
  position: absolute;
  width: calc(100% - 16px);
  height: 32px;
  background-color: black;
  z-index: 100;
  opacity: 0.3;
  border-radius: 8px;
  @apply --layout-horizontal;
  @apply --layout-center-justified;
  margin-top: 8px;
  margin-left: 8px;
  margin-right: 8px;
}

.map {
  position: relative;
  background-color: gray;
  height: 100%;
  width: 100%;
}

<div class="container general">
  <div class="toolbar">

  </div>
  <div class="map">

  </div>
</div>

问题是我找不到使 div.toolbar 具有 .container .general Div 宽度的方法。我尝试使用 flex，但我坚持这样做，我将不胜感激。

Answer 1

将position: relative添加到.general

.general {
  @apply --layout-flex;
  width: 300px;
  height: 300px;
  position: relative;
}

.toolbar {
  position: absolute;
  width: calc(100% - 16px);
  height: 32px;
  background-color: black;
  z-index: 100;
  opacity: 0.3;
  border-radius: 8px;
  @apply --layout-horizontal;
  @apply --layout-center-justified;
  margin-top: 8px;
  margin-left: 8px;
  margin-right: 8px;
}

.map {
  position: relative;
  background-color: gray;
  height: 100%;
  width: 100%;
}

<div class="container general">
  <div class="toolbar">

  </div>
  <div class="map">

  </div>
</div>