Basic CSS positioning issue

Question

I have 3 boxes. When setting the middle's position to relative (to 'body' in this case) and negative top, the box below doesn't move up too. How could I do that?

HTML:

<div class="box" id="up"></div>
<div class="box" id="middle"></div>
<div class="box" id="down"></div>

CSS:

.box {
  width: 400px;
  height:200px;
  position: relative;
}

#up {
  background: red;
}

#middle {
  top: -50px;
  background: green;
}

#down {
  background: blue;
}

http://codepen.io/anon/pen/dBgbz/

EDIT: I forgot to say that I've tried with negative margin-top, but works except for Internet Explorer. Is there any other way to do it?

Basically, you want the blue box to follow the green box's position? — Corb3nik
– Corb3nik, Commented Mar 24, 2014 at 5:04
Yes. I've tried with margin-top I forgot to say, and works except for Internet Explorer. — whitenoisedb
– whitenoisedb, Commented Mar 24, 2014 at 5:41

Rohit Azad Malik · Accepted Answer · 2014-03-24 05:02:35Z

2

Define your #middle margin-top: -50px and remove top : -50px

#middle {
margin-top:-50px;  // add this  
top: -50px;  // remove this 
  background: green;
}

Demo

answered Mar 24, 2014 at 5:02

Rohit Azad Malik

32.3k17 gold badges72 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

whitenoisedb Over a year ago

I forgot to say that I've tried that, but the problem is that way it doesn't work on IE...

Magicianred · Accepted Answer · 2014-03-24 06:58:45Z

0

Do you add the top yet to #down box:

#down {
  top: -50px;
  background: blue;
}

answered Mar 24, 2014 at 6:58

Magicianred

5662 silver badges8 bronze badges

Collectives™ on Stack Overflow

Basic CSS positioning issue

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related