Creating multiple divs as children-CodePudding

I have to create divs one inside the other:

I tried this code, but not able to understand what is the correct way to solve this:

<div style="background-color: yellow;">
  One
  <div style="background-color: blue;">
    Two
    <div style="background-color: black;">
      Three
      <div style="background-color: grey;">
        Four
      </div>
    </div>
  </div>
</div>

This is the output of my code:

CodePudding user response：

I think this code is what you want

div {
  background-color: yellow;
  width: 200px;
  height: 200px;
  padding-left: 30px;
}

div div {
  background-color: blue;
  width: 150px;
  height: 150px;
  padding-top: 10px;
}

div div div {
  background-color: black;
  width: 100px;
  height: 100px;
  padding-top: 30px;
}

div div div div {
  background-color: grey;
  width: 25px;
  height: 25px;
}

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

CodePudding user response：

You have to put z index inside your code:

One

<div style="background-color: blue;z-index:8;">
    Two
    <div  style="background-color: black;z-index:7;">
        Three
        <div  style="background-color: grey;z-index:6;">
            Four
        </div>
    </div>
</div>
</div>

Then you can add box-effect in your code as well. For a better understanding of box effect see this

CodePudding user response：

You're on the right track! Your HTML is correct, you just need CSS. Try messing with some padding to get it right.

div {
  padding: 30px;
}

<div style="background-color: yellow;">
  One
  <div style="background-color: blue;">
    Two
    <div style="background-color: black;">
      Three
      <div style="background-color: grey;">
        Four
      </div>
    </div>
  </div>
</div>

The reason it looked like the blocks are one on top of each other is only because of the text, which was giving the divs some height. other then that they were sharing borders. Padding will pull those borders apart and you will begin to see that your elements are actually in the precise position you required.

CodePudding user response：

Edit: You said, create, so I assumed you wanted to programmatically create divs inside each other. If you're simply just trying to create HTML with divs inside each other, you have setup the HTML correctly, you just need to set the width and height of each div to be less then 100% of its parent div (see my CSS for setting width and height to 90%. I'll keep the code below incase it helps you at all.

Attached snipped to show you how to create divs inside of divs. More importantly, it shows you how to find the deepest div, so you can then add a new div within that div. Good luck.

const addDivButton = document.querySelector('.add_div_button');
const mainDiv = document.querySelector('.main_div');
addDivButton.addEventListener('click', e => {
    allChildren = mainDiv.querySelectorAll('div');
    const allChildrenArray = Object.values(allChildren)
    let lastChild;
    let newChild = document.createElement('div')
    newChild.id = `child_${allChildrenArray.length 1}`
    if (allChildren.length > 0) {
        lastChild = allChildrenArray[allChildrenArray.length - 1]
    } else {
        lastChild = mainDiv
    }
    if (getComputedStyle(lastChild).backgroundColor === 'rgb(80, 80, 80)') {
        newChild.style.backgroundColor = 'rgb(175, 175, 175)'
    } else {
        newChild.style.backgroundColor = 'rgb(80, 80, 80)'
    }
    lastChild.append(newChild)
})

.main_div {
    height: 90vh;
    width: 90vw;
    background-color: rgb(175, 175, 175);
}

.main_div div {
    width: 90%;
    height: 90%;
}

<button >Click to Add Div</button>
    <div >
        

    </div>