Say there are 3 parent divs nested in the body. How do one make the 2nd div sit under the 1st, and the 3rd sit under the 2nd? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 5

Say there are 3 parent divs nested in the body. How do one make the 2nd div sit under the 1st, and the 3rd sit under the 2nd?

5th Sep 2019, 2:40 AM
@ifycode
@ifycode - avatar
6 Answers
+ 8
May be this one satisfy your question. CSS file .first{width:120px;height:120px;background:red;} .second{width:120px;height:120px;background:yellow; position:absolute ;top:50px;left :50px;} .third{width:120px;height:120px;background:green; position:absolute ;top:100px;left :100px;}
7th Sep 2019, 3:27 AM
‎Virat
‎Virat - avatar
+ 7
No. Like this: ... <body> <div class ="first"> </div> <div class ="second"> </div> <div class ="third"> </div> </body> ...
5th Sep 2019, 2:51 AM
@ifycode
@ifycode - avatar
+ 6
To make elements "sit" on or overlap the other, all you've gotta do is add position: relative; or position: absolute; to them and use z-index to decide which gets to stay on top (high z-index value) and which get casted behind (lower z-index value).
12th Sep 2019, 4:12 PM
Fredericks
Fredericks - avatar
+ 5
Virat Kohli I've been able to apply the positioning in my newest code upload. Although I used it on pseudo elements, I think I understand how it works for divs. Thanks a lot. I'm yet to study z-index though Fredericks https://code.sololearn.com/WM3c5j8HZL21/?ref=app
12th Sep 2019, 10:15 PM
@ifycode
@ifycode - avatar
+ 4
Thanks Virat Kohli. Will alert you once I try it out.
9th Sep 2019, 3:57 AM
@ifycode
@ifycode - avatar
+ 2
Is it like this ? <div class="first"> <div class="second"> <div class="third"></div> </div> </div>
5th Sep 2019, 2:44 AM
Uchiha Itachi
Uchiha Itachi - avatar