By default, a browser renders the webpage, by placing elements on the webpage from left-to-right and from top-to-bottom. The style rule position can be used to override this default behavior. When you specify an element's "position:relative" you can use the "left" and "top" properties to offset the element from where it would be located in the normal flow.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

position:relative

Default Positioning

One of the most important CSS webpage layout concepts to understand is how to position webpage elements. Every element on a webpage, be it an image, a drop-down list, or just a paragraph of text, is actually a rectangular box, referred to as an element. When a Web browser loads an html file, it parses the html code from left-to-right top-to-bottom, just as we would read it and, by default, it renders the webpage, by placing elements on the webpage from left-to-right and from top-to-bottom. You can think of this as the webpage elements as "flowing" into position. As the elements flow onto the webpage, they line themselves up along a "baseline".

Webpage elements that flow into position from left-to-right are called inline elements. If there isn't enough room to the right to place an element, the browser places it on the next line. Certain elements, like paragraphs <p>, divisions <div>, and horizontal rules <hr />, called block elements, do not normally flow on the webpage from left-to-right. Block elements, by default, start on a new line, causes the next element in the flow to start a new line.

The style rule position is used to override this default behavior. The value of the position element may be set to relative, absolute, or fixed. In this article, I'll describe the effect of setting the style rule position: relative.

Shown below is the code for a webpage containing three span elements and how they would be rendered by default in the browser.

<html>
<head>

<style type="text/css">
.myBox
{
background-color:crimson;
border-style:solid;
border-width:1px;
padding:4px;
}
</style>

</head>
<body>

<span class="myBox">Element 1</span>
<span class="myBox">Element 2</span>
<span class="myBox">Element 3</span>

</body>
</html>

Normal inline flow

Relative Positioning

When you specify an element's position:relative you can relocate the element relative to where it would be located in the normal flow. You can use the left and⁄or top property to offset the element from where it would be located in the normal flow.

Shown below is the code with the CSS rule "position:relative" specified and the left property set to 20 pixels and the top property set to 20 pixels.

<html>
<head>

<style type="text/css">
.myBox
{
background-color:crimson;
border-style:solid;
border-width:1px;
padding:4px;
width:80px;
}
#myRel
{
position:relative;
left:20px;
top:20px;
background-color:crimson;
border-style:solid;
border-width:1px;
padding:4px;
width:80px;
}
</style>

</head>
<body>

<span class="myBox">Element 1</span>
<span id="myRel">Element 2</span>
<span class="myBox">Element 3</span>

</body>
</html>

Relative Positioning

Note that Element 2 is relative positioned 20 pixels to the right and 20 pixels down from where it would be located in the normal flow.

Note that the values of left and top are offsets relative to where the element would normally appear, NOT offsets with respect to another element. Other elements are not affected by the offsets, so the relative positioned element could overlap elements that are in normal flow.

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268