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;

  开发者_如何学Pythonposition:relative;
    z-index:-1;
}
.div2{
  left:-50px;
  z-index:1;
  position:relative;
}

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

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.

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 :)

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/