CODEWITHSUNDEEP
htmlcss
tablexyz
tablexyz

Reputation: 35

positiong div according to its placing order issue

I want to position divs according their placing order but they are not following each other. I want second div follow first div right after it(downwards).

<body>
<div id="first" style="display:block;width:20%;height:100px;position:relative;top:50px;border:2px solid green;">
</div>
<div id="second" style="background-color:lightgrey;position:relative;display:block;width:20%;height:30px;border:1px solid red;">
    <div style="position:relative;display:block;">
    Hello!
    </div> 
</div>
</body>

Upvotes: 0

Views: 37

Answers (2)

user5726628
user5726628

Reputation:

In response to your question of 'why position:relative matters?'; position relative moves an element into normal flow, allowing it to be positioned on the web page using the offset properties like top, right, bottom and down.

Upvotes: 0

user4108694
user4108694

Reputation:

You simply should delete the position:relative style in your first of your divs.

<body>
<div id="first" style="display:block;width:20%;height:100px;top:50px;border:2px solid green;">
</div>
<div id="second" style="background-color:lightgrey;position:relative;display:block;width:20%;height:30px;border:1px solid red;">
    <div style="position:relative;display:block;">
    Hello!
    </div> 
</div>
</body>

Check here: https://jsfiddle.net/dnvabqgx/1/

Why do position:relative matters

This type of positioning is probably the most confusing and misused. What it really means is "relative to itself".

If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it's positioning at all, it will be exactly as it would be if you left it as position: static;

But if you DO give it some other positioning attribute, say, top: 50p; as you don in your first div, it will shift it's position 50 pixels DOWN from where it would NORMALLY be.

--read about all the position properties here

Upvotes: 2

Related Questions