CODEWITHSUNDEEP
css
SuperString
SuperString

Reputation: 22519

Divs on top of each other css

I want to make the div 1 on top of the div 2, but this doesn't work

    .div1, div2 {
  width:100px;
  height:100px;
  float:left;
}
.div1{

  left:-50px;

  position:relative;
    z-index:-1;
}
.div2{
  left:-50px;
  z-index:1;
  position:relative;
}

Upvotes: 0

Views: 4022

Answers (4)

Michael Martin-Smucker
Michael Martin-Smucker

Reputation: 12705

In your example, the boxes aren't overlapping because they're floating next to each other, then you move them both to the left 100px. Try only moving the red box to the left, then give the blue box a higher z-index if you want it to be on top. The z-index is the stacking order, where elements with lower numbers appear below elements with higher numbers. The Mozilla Developer Network has good information on this topic.

With some slight tweaking, this works fine for me: http://jsfiddle.net/mlms13/ZGJXt/2/

Upvotes: 0

mylesagray
mylesagray

Reputation: 8869

Try to avoid negative z-index values,

try using z-index:1 on .bluebox and z-index:2 on .redbox

Here you go:

Live Demo

Clever blend of absolute positioning and z-index :)

Upvotes: 0

TimFoolery
TimFoolery

Reputation: 1925

If your blue box appears first in the HTML, then change bluebox's left to px and redbox's left to -204px. If the red box appears first in the HTML, then change redbox's left to 0px and bluebox's left to -204px.

(The extra 4 pixels is for the 2 px border on either side.)

Using Myles' JSFiddle, here is a demo of the position:relative solution: JSFiddle

Upvotes: 1

zdyn
zdyn

Reputation: 2173

If you want the blue box on top you have to give it a higher z-index value. Right now it is lower.

That doesn't really matter though because you have them both floated and margined left so that they don't actually overlap.

Try giving the red box margin-left: -200px and give the blue box z-index: 10.

Upvotes: 0

Related Questions