CSS Positioning

CSS Positioning is really a great and important task which all the developers and designers have to perform throughout their work. It allow us to

  • Create Beautiful and Eye Catching Sites
  •  Create Shapes with CSS
  •  Create Layout

CSS Provide 4-Types of Positioning

  1. Static (Default)
  2.  Relative
  3.  Absolute
  4.  Fixed

The Orignal Webpage Source Code

index.html

<!Doctype Html>
<html>
<head>
<title>DLALpha</title>
</head>
<body>
<div id="div1">
<p>One reason people lie is to achieve personal power. Achieving personal power is helpful for someone who pretends to be more confident than he really is. For example, one of my friends threw a party at his house last month. He asked me to come to his party and bring a date. However, I didn’t have a girlfriend. One of my other friends, who had a date to go to the party with, asked me about my date. I didn’t want to be embarrassed, so I claimed that I had a lot of work to do. I said I could easily find a date even better than his if I wanted to. I also told him that his date was ugly. I achieved power to help me feel confident; however, I embarrassed my friend and his date. Although this lie helped me at the time, since then it has made me look down on myself. </p>
</div>
<div id="div2">
<p>A Quick brown fox jumps over the crazy dog</p>
<div id="div3">
<p>(Describe College Life)
Most students like the freedom they have in college. Usually college students live on their own, in the dormitory or in an apartment. This means they are free to come and go as they like. Their parents can’t tell them when to get up, when to go to school, and when to come home. It also means that they are free to wear what they want. There are no parents to comment about their hair styles or their dirty jeans. Finally, they are free to listen to their favorite music without interference from parents.
</p>

</div>
<div id="div4">
<p>
Money causes teenagers to feel stress. It makes them feel bad about themselves and envy other people. My friend, for instance, lives with her family and has to share a room with her sister, who is very cute and intelligent. This girl wishes she could have her own room and have a lot of stuff, but she can’t have these things because her family doesn’t have much money. Her family’s income is pretty low because her father is old and doesn’t go to work
</p>
</div>
<div id="div5">
<p>The first thing we did as soon as we came to the U.S.A. about two years ago was to search for an apartment in order not to live with one of our relatives. After looking for one month to find a suitable apartment, I finally found the apartment where we have been living. It includes a living room three bedrooms, and a kitchen. Probably the living room is my favorite room of all because we often gather together there after we come home from work or school.
</p>
</div>
</div>
<div id="div6">
<p>This is some kind of footer</p>
</div>
</body>
</html>

 

style.css
div{
    border:3px solid black;
}
#div1{
    background-color:indigo;
    color:white;
}
#div2{
    background-color:MediumSlateBlue;
}
#div3{
    background-color:darkkhaki;
}
#div4{
    background-color:peru;
}
#div5{
    background-color:violet;
}
#div6{
    background-color:darkorange;
}

OrignalWebpage

 

Static Positioning

Static Positioning is the default positioning option to position elements on your website. This is not usually used. But, it is used to override setting that might have been applied sometime in the past.

You cannot set top, bottom, left and right properties while using Static Positioning

Relative Positioning

Relative Positioning allow us to position our element relative to where it is located originally while appearing in the normal HTML flow. So, the style of third div (#div3) become

style.css

#div3{
    background-color:darkkhaki;
    position:relative;
        top:20px;
        left:50px;
}

RelativePositioning

This will push the third div (#div3) 20px down and 50px to the left from where it is originally located.

Absolute Positioning

Absolute positioning removed the element from normal HTML flow and positioned it within the non-static (parent) element. If all the elements are static or the element which you are positioning is not child of any other element, then the element is positioned within the browser window.

style.css

#div3{
    background-color:darkkhaki;
    position:absolute;
    top:20px;
    left:50px;
}

RelativePositioning

If the element which is positioned with the absolute positioning property is within the non-static element then the element will be positioned within the non-static parent element. For Example

style.css

#div2{
    position:relative;
    top:50px;
    background-color:MediumSlateBlue;
}
#div3{
    background-color:darkkhaki;
    position:absolute;
    left:200px;
}

This will display #div3 on the right corner pushing the #div3 200px from left.

AbsolutePositioningWithinNonStaticElement

What if you want an absolute positioned element within non-static parent element to be displayed within the browser windows not within the non-static parent element? The Answer is, use Fixed positioning.

Fixed Positioning

The element position is calculated much like the absolute positioning but, it is always in relation to browser window.

style.css

#div3{
    background-color:darkkhaki;
    position:fixed;
    top:10px;
    left:500px;
}

FixedPositioning

This will position the #div3 on the top right of the browser window. This will push the #div3 10px from top and 500px from left.

 

Helping Materials

Creating Columns In CSS with absolute positioning

Wraping Text Around The Image

Stacking Elements in CSS

Advertisements