css试图叠加div

Question

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

要做到这一点，我有以下HTML，我尝试使用这个CSS：

＆＃13;

＆＃13;

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

＆＃13;

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

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

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

问题在于我找不到让div.toolbar具有.container .general Div宽度的方法。我尝试使用flex，但是我坚持这一点，我将非常感谢你的帮助。

Answer 1

将position: relative添加到.general

＆＃13;

＆＃13;

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

＆＃13;

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

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

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我不知道文件的结构对你有多重要，但只是在.map中嵌套.toolbar会产生这种效果：

＆＃13;

＆＃13;

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

＆＃13;

<div class="container general">

     <div class="map">
     <div class="toolbar">

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

＆＃13;

＆＃13;

＆＃13;