CODEWITHSUNDEEP
htmlcssz-indexcss-position
Zerium
Zerium

Reputation: 17333

Z-index for relatively positioned elements?

I have an element, which I have tried to place on top of another with this:

<div id="foo1"></div>
<div id="foo2"></div>

And this CSS:

#foo1 {
  width: 600px;
  height: 300px;
  margin: 0;
}
#foo2 {
  width: 600px;
  height: 300px;
  margin-top: -300px;
}

But now #foo2 is going underneath #foo1. How would I fix this?

Upvotes: 0

Views: 158

Answers (5)

Jon Hudson
Jon Hudson

Reputation: 1184

You could place one div inside the other, and apply position: relative to parent and position: absolute to child. Child would appear above parent and aligned to top-left corner.

Upvotes: 0

enhzflep
enhzflep

Reputation: 13099

Just add position: relative; to each of the styles, as stated here: http://www.w3schools.com/cssref/pr_pos_z-index.asp

(They can both have relative positioning)

Upvotes: 1

Sowmya
Sowmya

Reputation: 26969

You can do it with positioning 

#foo1 {
  width: 600px;
  height: 300px;
 background-color:red;position:relative
}
#foo2 {
  width: 600px;
  height: 300px;
 background-color:green; position:absolute; top:0; left:0
}​

Demo here http://jsfiddle.net/fckrA/1/

Upvotes: 0

Sebass van Boxel
Sebass van Boxel

Reputation: 2602

Making them absolute instead of relative would do the job.

Upvotes: 2

Man Programmer
Man Programmer

Reputation: 5356

#foo1 {
  width: 600px;
  height: 300px;
  margin: 0;
  position:absolute;
  z-index:100;
}
#foo2 {
  width: 600px;
  height: 300px;
  margin-top: -300px;
  position:absolute;
  z-index:1000;

}

Upvotes: 1

Related Questions