CODEWITHSUNDEEP
htmlcssstackborder
Dyon Doorschot
Dyon Doorschot

Reputation: 53

css stack divs on top of each other

I cant seem to figure it out. I have seen all examples and questions, but i cant get those divs ontop of each other.

They have and border of 1px and for some reason the border shifts the divs to the right and bottom.

I know if i disable the borders then all the code online works just fine, but i need those dotted lines and with them, the divs dont align anymore. Z-index doesnt work, the blue div doesnt show ontop.

https://jsfiddle.net/x1L2jxnx/14/

<style>
    .content {
      width: 64px;
      height: 64px;
      margin: 32px;
      background-color: #FFD800;
      position: relative;
    }

    .content div {
      width: inherit;
      height: inherit;
      position: absolute;
      border-style: dotted;
    }

    .margin {
      border-color: #03A9F4;
      z-index: 3;
    }

    .border {
      border-color: #black;
      z-index: 2;
    }

    .padding {
      border-color: #808080;
      z-index: 1;
    }
</style>

<div class="content">
  <div class="margin">
    <div class="border">
      <div class="padding">

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

Upvotes: 0

Views: 690

Answers (1)

Carle B. Navy
Carle B. Navy

Reputation: 1156

I assume this is what you want. The width describes the inner width your <div> has. The border width comes on top of it. So every <div> has additional twice the border width to its inherited width.

.content {
  width: 64px;
  height: 64px;
  margin: 32px;
  background-color: #FFD800;
  position: relative;
}

.content div {
  top:0;
  bottom:0;
  right:0;
  left:0;
  position: absolute;
  border-style: dotted;
}

.margin {
  border-color: #03A9F4;
  z-index: 3;
}

.border {
  border-color: #black;
  z-index: 2;
}

.padding {
  border-color: #808080;
  z-index: 1;
}
<div class="content">
  <div class="margin">
    <div class="border">
      <div class="padding">

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

Upvotes: 1

Related Questions