How to make div appear in front of another?

Question

Please refer to the code below:

<ul>
 <li style="height:100px; overflow:hidden;">
  <div style="height:500px; background-color:black;">
  </div>
 </li>
</ul>

From the code above, we know that we can only see 100px height of black background.

Hhow can we see 500px height of <div> black background? In other words, how can I make the <div> appear in front of <li>?

I don't know of any browser that would render only 100 pixels of height in your example. — BoltClock, Mar 30 '11 at 00:56
http://stackoverflow.com/a/5480656/2299235 the aroth's anweser worked for me :D (Y) — Gustavo Amaro, Aug 22 '15 at 13:39
[This video](https://www.youtube.com/watch?v=l55hSbBUdmQ) is extremely helpful to understand how it works. — J0ANMM, Jan 11 '17 at 15:43

aroth · Accepted Answer · 2013-02-21T23:12:08.200

154

Use the CSS z-index property. Elements with a greater z-index value are positioned in front of elements with smaller z-index values.

Note that for this to work, you also need to set a position style (position:absolute, position:relative, or position:fixed) on both/all of the elements you want to order.

edited Feb 21 '13 at 23:12

answered Mar 30 '11 at 00:45

aroth

54,026
20
135
176

You may also want to remove any relevant `overflow:hidden` styling. – mathandy Jul 08 '21 at 00:29
The you @AndyP This fixed my problem!. – Mekanic Oct 01 '21 at 16:18
1

Was struggling a lot to fix this with z-index. The above note on adding the `position` style fixed the issue in seconds – Kalana Dananjaya May 16 '22 at 08:21

Jasur Shukurov · Answer 2 · 2020-08-20T03:21:45.220

22

In order an element to appear in front of another you have to give higher z-index to the front element, and lower z-index to the back element, also you should indicate position: absolute/fixed...

Example:

<div style="z-index:100; position: fixed;">Hello</div>
<div style="z-index: -1;">World</div>

edited Aug 20 '20 at 03:21

answered Jul 31 '19 at 14:20

Jasur Shukurov

339
3
5

This was what I needed cause I wanted to place a div over google maps. – rotimi-best Nov 08 '19 at 14:08

score 20 · Answer 3 · answered Mar 30 '11 at 00:47

20

You can set the z-index in css

<div style="z-index: -1"></div>

answered Mar 30 '11 at 00:47

Greg Randall

811
7
14

score 6 · Answer 4 · edited Apr 25 '18 at 04:47

6

Upper div use higher z-index and lower div use lower z-index then use absolute/fixed/relative position

edited Apr 25 '18 at 04:47

Community

1
1

answered Jun 12 '17 at 11:09

dinuka saminda

181
3
6

score 5 · Answer 5 · answered Mar 30 '11 at 00:46

5

The black div will display the full 500px unless overflow:hidden is set on the 100px li

answered Mar 30 '11 at 00:46

David John Smith

1,824
2
18
22

score 1 · Answer 6 · answered Mar 30 '11 at 00:45

I think you're missing something.

http://jsfiddle.net/ZNtKj/

<ul>
 <li style="height:100px;overflow:hidden;">
  <div style="height:500px; background-color:black;">
  </div>
 </li>
</ul>
<ul>
 <li style="height:100px;">
  <div style="height:500px; background-color:red;">
  </div>
 </li>
</ul>

In FF4, this displays a 100px black bar, followed by a 500px red block.

A little bit different example:

http://jsfiddle.net/ZNtKj/1/

<ul>
 <li style="height:100px;overflow:hidden;">
  <div style="height:500px; background-color:black;">
  </div>
 </li>
</ul>
<ul>
 <li style="height:100px;">
  <div style="height:500px; background-color:red;">
  </div>
 </li>
 <li style="height:100px;overflow:hidden;">
  <div style="height:500px; background-color:blue;">
  </div>
 </li>
 <li style="height:100px;overflow:hidden;">
  <div style="height:500px; background-color:green;">
  </div>
 </li>
</ul>

How to make div appear in front of another?

6 Answers6

Linked

Related