CODEWITHSUNDEEP
htmlcss
GirishK
GirishK

Reputation: 1963

How to overlay div over another div without using z-index and position : absolute

I have 2 divs as shown in following code. I want to overlay "secondDiv" on "firstDiv". My HTML template will be dynamically loaded. So position of the divs on the screen can't be determined. I can't use z-index and position: absolute as it disturbs all the layout.

<div id="firstDiv" style= "height=54px;width=96px"></div>
<div id="secondDiv"></div>

How can I achieve this?

Upvotes: 3

Views: 11190

Answers (3)

ace
ace

Reputation: 905

First of all, if you give a positioned element a z-index of -1 it will go beneath other content. You don't need position absolute, RELATIVE positioning works for this which means that it will still be in the flow of your document AND be beneath other objects overlapping with it.

This article is what you want to read for overlapping content nuances. It focuses on z-index but also talks about stacking orders which is something you might consider leveraging.

Upvotes: 2

Tomas Kohl
Tomas Kohl

Reputation: 1388

Put both divs in another div with position set to relative, and you can use absolute positioning and z-index, and/or visibility controller by javascript.

Upvotes: 0

Pratik
Pratik

Reputation: 30855

try this

<div id="firstDiv" style="height:150px;width:150px">Hello</div>
<div id="secondDiv" style="position:absolute;height:50px;width:50px;background:rgb(255,0,0);left:9px;top:20px;">how r u</div>

Upvotes: 0

Related Questions