CODEWITHSUNDEEP
htmlcssposition
steo
steo

Reputation: 4656

make div change position when other div does

I am trying to understand css positioning. What I am trying to accomplish is : I want that when I set a div position , div's after it, change position respect of the first div moved ,without overlapping them. Let's make an example :

HTML

<div class="wrap">
    <div class="box1">
    </div>
    <div class="box2">
    </div>
    <div class="box3">
    </div>
</div>

CSS

.wrap{
    position: absolute;
    background-color:yellow;
    width:500px;
    height:600px;
    margin:0 auto;
}

.box1,.box2,.box3{
    position: relative;
    width:450px;
    height:150px;
    margin:0 auto;
}
.box1{background-color:red; top: 100px;}
.box2{background-color:green;}
.box3{background-color:blue;}

Now , when I set , e.g top:100px on box1 , it goes 100px from the top, but box2 and box3 still remains there. I want that when i set top position on one of the div they "suffer" the change of the set position , and not overlap or get overlapped by other divs I tried, as you can see, with position: relative but It did not reach my goal.

Sorry if I explained it better , it's hard to me to explain it in English.

Upvotes: 0

Views: 1478

Answers (4)

Irvin Dominin
Irvin Dominin

Reputation: 30993

The css top property can be used only on elements with position absolute (as talked in chat :-).

For a relative positioned element you should use margin-top property like:

.box1 {background-color:red; margin-top: 100px;}

Here is a working fiddle: http://jsfiddle.net/IrvinDominin/eux4C/4/

Upvotes: 1

DougM
DougM

Reputation: 2888

It sounds like you really want to preserve the standard box model, rather than ignoring it.

Don't set a position: relative, and use padding -top or margin-top to add the extra space.

Upvotes: 0

Yenn
Yenn

Reputation: 929

top property (as left, right and bottom) is used to positioning absolute elements only.
giving this property to the element probably gives it absolute behavior.
to position a relative element you should use margin-top instead.

HERE is a working fiddle

Upvotes: 1

Victoria Ruiz
Victoria Ruiz

Reputation: 5013

Use margin-top instead of top. Top/Bottom/Left/Right changes the position from where it would normally be, and therefore it doesn't affect the rest. Margins will affect the rest too.

http://jsfiddle.net/eux4C/3/

.box1{background-color:red; margin-top: 100px;}

Upvotes: 1

Related Questions