CODEWITHSUNDEEP
htmlcss
Jose Raul Perera
Jose Raul Perera

Reputation: 878

css trying to overlay divs

I have tried to layout the following view but I can't find a way to achieve this, I need to overlay 2 divs in this way:

enter image description here

To do this I have the following HTML and I tried to use this 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>

The problem is that I can't find a way to make div.toolbar to have the width of the .container .general Div. I tried using flex to but I'm stuck with this, I will appreciate any help on this.

Upvotes: 0

Views: 39

Answers (2)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

Add position: relative to .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>

Upvotes: 4

aMJay
aMJay

Reputation: 2233

I don't know how important the structure of file is to you but simply nesting .toolbar in .map would achive that effect:

.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="map">
     <div class="toolbar">

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

Upvotes: 0

Related Questions