We help IT Professionals succeed at work.

Relative positioning in CSS

brgdotnet
brgdotnet asked
on
Does Relative positioning mean that the item being positioned will be positioned
relative to it's containing element. In my example below, I position the text
"Hello World" 80x80 pixels left and right of it's containing element of the
div tag?


<!DOCTYPE HTML>
<HTML>
  <HEAD>
<style>
#squareImage
{
position: relative;
left: 80px;
top: 80px;

}
</style>
    <TITLE>The document title</TITLE>
  </HEAD>
  <BODY>
    <H1>Main heading</H1>
    <P>A paragraph.</P>
      <div id="squareImage">Hello World</div>
  </BODY>
</HTML>In a Frameset
Comment
Watch Question

Fixer of Problems
Most Valuable Expert 2014
Commented:
The answer is "it depends".   I have attached a page with a bunch of positioned elements.  There is a 'wrap' div containing everything... if it is defined with 'position: relative;'.  Change that and every thing changes.  'relative' elements seem to be 'relative' to the element before them.

Positioned elements also act funny if the containing element is not big enough to contain them.  If you change the width of the lower div from 200 to 400 to 600 to 800, you will see that some of the elements supposedly contained by it change in ways that I wouldn't have predicted.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
body { margin:0; }
#wrap {
	position: relative;
	width: 806px; 
	margin-left: auto; 
	margin-right: auto;
	} 
-->
</style>
</head>
<body>
<div id="wrap">
<h1>Absolutely Relative</h1>
&nbsp;
<div style="border:1px solid #000000">
<span style="position: absolute; left: 240px;">First absolute</span>
<span style="position: absolute; left: 360px;">Second absolute</span>
<span style="position: absolute; left: 480px;">Third absolute</span><br />
<span style="position: relative; left: 240px;">First relative</span><br />
<span style="position: relative; left: 360px;">Second relative</span><br />
<span style="position: relative; left: 480px;">Third relative</span><br />
<span style="position: absolute; left: 240px; top: 20px;">Forth absolute</span>
<span style="position: absolute; left: 360px; top: 40px;">Fifth absolute</span>
<span style="position: absolute; left: 480px; top: 60px;">Sixth absolute</span>
<span style="position: relative; left: 240px; top: 20px;">Forth relative</span><br />
<span style="position: relative; left: 360px; top: 40px;">Fifth relative</span><br />
<span style="position: relative; left: 480px; top: 60px;">Sixth relative</span><br />
</div>
&nbsp;
<div style="position: absolute; left: 2px; top: 300px; width: 800px; border:1px solid #000000;">
<span style="position: absolute; left: 240px;">First absolute</span>
<span style="position: absolute; left: 360px;">Second absolute</span>
<span style="position: absolute; left: 480px;">Third absolute</span><br />
<span style="position: relative; left: 240px;">First relative</span><br />
<span style="position: relative; left: 360px;">Second relative</span><br />
<span style="position: relative; left: 480px;">Third relative</span><br />
<span style="position: absolute; left: 240px; top: 20px;">Forth absolute</span>
<span style="position: absolute; left: 360px; top: 40px;">Fifth absolute</span>
<span style="position: absolute; left: 480px; top: 60px;">Sixth absolute</span>
<span style="position: relative; left: 240px; top: 20px;">Forth relative</span><br />
<span style="position: relative; left: 360px; top: 40px;">Fifth relative</span><br />
<span style="position: relative; left: 480px; top: 60px;">Sixth relative</span><br />
</div>
</div>
</body>
</html>

Open in new window

Commented:
position:relative usually implies that the element will be positioned relative to *where it would have been otherwise*

position:absolute actually means the element will be positioned relative to boundary of the nearest parent element having position:relative;

Confusing, I know.

You can think of the top, left, bottom, and right properties as signifying *coordinates* when the element is position: absolute; and signifying *offset* when the element is position:relative.
brgdotnetcontractor

Author

Commented:
Hi ichook "Relative to where it would have been otherwise" that does not make sense? Yes it is confusing.
brgdotnetcontractor

Author

Commented:
Confusing topic

Commented:
brgdotnet...

Let me rephrase...

An element that has position:relative; will be positioned relative to its normal location.

So, there is a "natural" position of each element on the page. Using the top, right, left, and bottom properties, it would be possible to "offset" that natural position in any direction.

Absolute is different because elements are pulled out of the natural "flow" of the page display and positioned anywhere, relative to the nearest parent having position: relative;.

Sorry if this is confusing to you. I would recommend reading http://www.w3schools.com/Css/css_positioning.asp