Is it possible to use position relative more than once in the same html page?

Question

I am using 'position relative' and 'position absolute' on my master page.

I have a page that use the above master page, And I am trying to use in this page the 'Position relative' and 'position absolute' again for 2 other elements, but the element below ('position absolute') in this page is not placed according to the element above his ('position relative') and instead it refers to the 'position relative' of the element in the master page..

Hope is was not too clumsy explanation..

Is it possible to use 'position relative' more than once on the same HTML page??? If so, how??

html codes

<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="basic.css">

</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>

css codes body{ margin: 0px; padding: 0px; }

.one{
    width: 200px;
    height: 200px;
    background: red;
    position: relative;
}

.two{
    width: 200px;
    height: 200px;
    background: green;
    position: absolute;
    top: 0px;
    left: 200px;
}

.three{
    width: 200px;
    height: 200px;
    background: blue;
    position: relative;
}

.four{
    width: 200px;
    height: 200px;
    background: black;
    position: absolute;
    top: 0px;
    left: 200px;
}

codepen link

Did we answer your question? If so, please select a correct answer to close the question. Else, please let us know how we can help further with this question. — cssyphus, Aug 23 '14 at 16:35

score 0 · Answer 1 · answered Aug 23 '14 at 16:08

When one uses position: absolute it is calculated based on the ancestor, not sibling, so your .two and .four divs are positioned relatively to the body, not .one and .two, use this instead:

<div class="one">
    <div class="two"></div>
</div>
<div class="three">
    <div class="four"></div>
</div>

cssyphus · Answer 2 · 2014-08-23T16:21:25.767

Your black and green divs are occupying the exact same position, with the black one on top of the green one.

You need a better understanding of absolute and relative positioning.

Very simplistically, absolute takes the element out of the flow, and sticks it at the top left corner of the current div. (In fact, this is essentially correct but a little too simplistic. See the first referred article for an excellent explanation -- but what I wrote is basically correct for now.)

relative starts with the element in its normal position in the flow, but allows you to reposition the element up/down left/right of where it began.

float:left and float:right take the element out of the normal flow, but leave it at the left margin.

Here is a jsFiddle

All I changed was for the black div -- I changed top:0 to top:200px

Is it possible to use position relative more than once in the same html page?

2 Answers2

Linked