Html Question posted in
Some basic documentation can be found here.

Html – How to overlap divs

I am trying to produce the following result:
Desired outcome
However I am getting this so far and I am stuck.
What I am getting

This is my code:

.base {
  background: #e2e2e2;
  width: 1020px;
  height: 350px;
  position: absolute;
  top: 100px;
  left: 130px;
}
<div class="section5" style="width:100%;background-color:#f5f5f5;height:550px;position: relative;">
  <div class="base"></div>
  <div class="square1" style="width:255px;height:193px;background-color:#969696; z-index:1;"></div>
</div>
Tags:

2

Answers


  1. 0

    It might help, it’s derived with the help of z-index, you can adjust the rest of the boxes.

    .section5{
  width:100%;
  background-color:#f5f5f5;
  height:550px;
  position: relative;
  z-index:0;
}
.square1{
  width:255px;
  height:193px;
  background-color:#969696; 
  position: relative;
  z-index:1;
}
.base{
    background:#e2e2e2;
    width:1020px;
    height:350px;
    position: absolute;
    top: 100px;
    left:130px;
  z-index: -1;
}
    <div class="section5">
    <div class="base"></div>
    <div class="square1"></div>
</div>
    Login or Signup to reply.
  2. 0

    We start with the base of our HTML:

    <div class="section5">
    <div class="base"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

    And style:

    .section5 {
    position: relative;
    width: 800px;
    height: 600px;
    background-color: #f5f5f5
}

.base {
    position: relative;
    width: 600px;
    height: 400px;
    background-color: #e2e2e2;
    left: 100px;
    top: 100px;
}

.square {
    position: absolute;
    width: 150px;
    height: 120px;
    background-color: #969696;
}

    Now we can use nth-of-type to make the odd squares white:

    .square:nth-child(odd) {
    background-color: white;
}

    To calculate the absolute position of the squares, if we want the first and last square to have a 50px gap from the .section5 square, and we have n squares, we can calculate the distance d between two adjacent squares like this:

    d = (W - 2x - w) / (n - 1)

    where W is the width of the .section5 and x is the 50px gap we mentioned earlier. So the d in this case will be 110px, so the left of each square needs to be increased by 110px from the previous one.

    The same logic applies to the top.

    And by applying those, we get the final result (open it in full view)

    .section5 {
    position: relative;
    width: 800px;
    height: 600px;
    background-color: #f5f5f5;
}

.base {
    position: relative;
    width: 600px;
    height: 400px;
    background-color: #e2e2e2;
    left: 100px;
    top: 100px;
}

.square {
    position: absolute;
    width: 150px;
    height: 120px;
    background-color: #969696;
}

/* Apply alternating background color to odd squares */
.square:nth-child(odd) {
    background-color: white;
}

/* Positioning the squares */
.square:nth-child(2) {
    left: 50px;
    top: 50px;
}

.square:nth-child(3) {
    left: 160px;
    top: 126px;
}

.square:nth-child(4) {
    left: 270px;
    top: 202px;
}

.square:nth-child(5) {
    left: 380px;
    top: 276px;
}

.square:nth-child(6) {
    left: 490px;
    top: 354px;
}

.square:nth-child(7) {
    left: 600px;
    top: 430px;
}
    <div class="section5">
    <div class="base"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

    An alternative approach using CSS variables:

    .square {
    position: absolute;
    width: 150px;
    height: 120px;
    background-color: #969696;
    left: calc(50px + 110px * var(--i));
    top: calc(50px + 76px * var(--i));
}

.square:nth-child(2) { --i: 0; }
.square:nth-child(3) { --i: 1; }
.square:nth-child(4) { --i: 2; }
.square:nth-child(5) { --i: 3; }
.square:nth-child(6) { --i: 4; }
.square:nth-child(7) { --i: 5; }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search