CODEWITHSUNDEEP
htmlcss
zac1987
zac1987

Reputation: 2777

How to make div appear in front of another?

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>?

Upvotes: 80

Views: 417665

Answers (6)

Jasur Shukurov
Jasur Shukurov

Reputation: 359

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>

Upvotes: 23

dinuka saminda
dinuka saminda

Reputation: 209

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

Upvotes: 6

aroth
aroth

Reputation: 54856

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.

Upvotes: 161

Greg Randall
Greg Randall

Reputation: 921

You can set the z-index in css

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

Upvotes: 20

David John Smith
David John Smith

Reputation: 1864

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

Upvotes: 5

Jared Farrish
Jared Farrish

Reputation: 49238

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>

Upvotes: 1

Related Questions