Overlapping multiple div using CSS?

Question

I'm trying to create a design using multiple divs using CSS.

I'm already written code for it but don't know what is the problem with my code as my left and right side div not aligning at vertically center and all the divs are not overlapped with main yellow centered div which is I'm unable to achieve.

Note: I tried this with z-index but did not get what I want.

Output I'm getting:

Output I want to achieve:

My code :





  
  
  
  





  
    Some content here...
  
  
    
      Some content here..

    
    
      Some content here..
    
    
      Some content here...
    
  
  
    Some content here..

Please somebody help me with the Source Code I tried almost all the related answer.

user_14559436 · Answer

You can use Flexbox or Positioning.
Using Positioning makes it more flexible to add content to the holder element.
While Flexbox is more flexible when it's about adding and aligning boxes.

# Positioning

Description:

Create 4 elements to be the boxes.
Each .box has it's direction.

Example:

.

Wrap all of them in div.boxes. This way you can separate the .boxes from the content (if there) in the holder,

Style the the position of .wrapper so all the positioned absolute elements stays in the .wrapper.

.wrapper {position: relative;}

Finally, set the position of each box:
Example:

.box.top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -40px;
}

Notes:

Don't use:

left property on .box.right.
top property on .box.bottom.

It won't set the negative margin which pushes them to edges.

In case content added to the holder (.wrapper), wrap the content in div.content and add inner space using padding. The value of padding in the code example is 40px, which it's related to the .boxes dimenstions. The space (padding) is added to prevent overflow between content and .boxeses. And we can go further with styling the .boxes with overflow and z-index property.

For more about using negative maring and the boxes dimenstions:
Check for Notes in Flexbox

The Code:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.wrapper {
    position: relative;
    width: 600px;
    height: 600px;
    border: 1px solid;
    margin: 50px auto;
}

.box {
    position: absolute;
    border: 1px solid;
    background-color: red;
}

.box.top, .box.bottom {
    width: 200px;
    height: 80px;
}

.box.left, .box.right {
    width: 80px;
    height: 200px;
} 

.box.top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -40px;
}

.box.bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: -40px;
}

.box.left {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    margin-left: -40px;
}

.box.right {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-right: -40px;
}

.content {
    padding: 40px; /* check notes */
}


    
        
        
        
        
    
    
        Hello World!

# Flexbox

Description:

Create 3 elements to hold the .boxes.
top: holding top box
center: holding left and right boxes
bottom: holding bottom box

In other words:

Each .box is nested (a child) in a div that has the class of the direction.

Example:

BOX

.

Left and right are nested in center.

HTML:

Wrap all of them in a div.wrapper:

The lines below will style the 3 elements and set them to their positions, .top will be centered (left right) and on top, .center will be centered from all the directions, .bottom is centered (left right) and at the bottom, by displaying the .wrapper children horizontally (flex-direction: column;) and centered (align-items: center;) with (space-between) them, using flex.

Check: A Complete Guide to Flexbox

.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

Then we do something similar with the .center element, by displaying both of left and right next to each other, centered and space-between them. (No flex-direction property in the declaration, since the default is in a row (vertically))

.wrapper .center {
    width: 100%; /* Don't delete, check notes */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

And finally, with negative margin we move the boxes to the edges.

.top .box {
    margin-top: -40px;
}

.bottom .box {
    margin-bottom: -40px;
}

.center .left .box {
    margin-left: -40px;
}

.center .right .box {
    margin-right: -40px;
}

Notes:

The left and right boxes are (width: 80px), each, which means the margin should be -40px (80 / 2 = 40) to set on center.

left: margin-left: -40px
right: margin-right: -40px

Same for top and bottom, since the dimensions are flipped.

top: margin-top: -40px
bottom: margin-bottom: -40px

This way, all the boxes are gonna be centered at the edges.

By default, when displaying with flexbox, the parent(.center) will take the width of it's content/children (fitted)! which means, width: 40px * 2, since we have 2 boxes in there. Now to make sure that the space-between value works, we should "stretch" the .center element (parent) by styling it's width to 100% which allows to the boxes to have as much as space-between, then every box is gonna be on it's position.

.wrapper .center {
    width: 100%; /* Don't delete, check notes */
}

The Code:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.wrapper {
    border: 1px solid;
    max-width: 600px;
    min-height: 600px;
    margin: 60px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.box {
    border: 1px solid;
    background-color: red;
}

.wrapper .top .box,
.wrapper .bottom .box {
    width: 200px;
    height: 80px;
}

.wrapper .center .box {
    width: 80px;
    height: 200px;
}

.top .box {
    margin-top: -40px;
}

.bottom .box {
    margin-bottom:-40px;
}

.wrapper .center {
    width: 100%; /* Don't delete, check notes */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.center .left .box {
    margin-left: -40px;
}

.center .right .box {
    margin-right: -40px;
}

EDIT:

As @anatolhiman mentioned in the comments:

but negative margins will create a problem by having the elements overflowing right and left (especially on narrow screens).

A simple solution: (same works for both examples)

wrap the HTML that we added before in another div, .container for example, and add spacing with CSS, either padding or margin works, depends on your situation.

So the question is...
Is it a space within the .container? --> padding.
Or outside of it? --> margin.

Give the .container a background-color, resize the window, and check both margin and padding to see the differences.

HTML - Update:

CSS - Add:

/* outside space */
.container {margin: 50px;}

/* Or */

/* inside space */
.container {padding: 50px;}

You may have to edit the margin property in .wrapper for top bottom.
Extra space added (50px) to include spaces for the .boxes as well.
Remember: .wrapper{max-width: VALUE} is taking a place in this functionality, since it's max-width is X but it could be smaller. So if the property is width: and not max-width then it'll behave differently, and won't work as expected (fully responsive), unless we use @media query or JavaScript.

user_11989189 · Answer

Maybe something like following snippet, with absolute positioning:

.maind {
    margin: 0px auto;
    width: 90%;
    padding: 10px;
    height: 900px;
    background-color: rgb(9, 252, 9);
    position: relative;
  }

  .fdiv {
    margin: auto;
    width: 25%;
    padding: 10px;
    height: 100px;
    background-color: rgb(10, 233, 222);
    margin-top: 30px;
    border: 2px solid red;
    position: absolute;
    top: 0;
    left: 35%;
    z-index: 22;
  }

  .sdiv {
    width: 80%;
    position: absolute;
    top: 10%;
    left: 10%;
    height: 600px;
    background-color: #ffff00ec;
    z-index: 12;
    margin: 0 auto;
  }

  .tdiv {
    margin: auto;
    width: 25%;
    padding: 10px;
    height: 100px;
    background-color: rgb(10, 233, 222);
    border: 2px solid red;
    position: absolute;
    bottom: 20%;
    left: 35%;
    z-index: 22;
  }

  p {
    text-align: center;
  }

  .wrap {
    display: flex;
    flex-direction: row;
    
  }

  .wr1 {
    width: 25%;
    height: 100px;
    background-color: rgb(10, 233, 222);
    border: 2px solid red;
    position: absolute;
    top: 35%;
    left: 0;
    z-index: 22;
  }
  .wr2 {
    width: 25%;
    height: 100px;
    background-color: rgb(10, 233, 222);
    border: 2px solid red;
    position: absolute;
    top: 35%;
    right: 0;
    z-index: 22;
  }



  
    Top...
  
  
    
      Left..
    
    
      Somessss content here..
    
    
      Right...
    
  
  
    Bottom..

Overlapping multiple div using CSS?

2 Answers

# Positioning

Description:

Notes:

The Code:

# Flexbox

Description:

Notes:

The Code:

EDIT: