CSS BASICS - Part I: POSITIONS

So you’ve decided to become a web developer and you’ve been learning CSS. But, there’s so much to learn and you’re not sure what topics to focus on. Well, this three part CSS series will help you become a CSS guru! (Well not really only wizards can achieve that). But you’ll become proficient in CSS, though.

                                                        ## What is CSS Position? ##

CSS Positions sets how an element is placed in a document. The offset properties; top, bottom, left and right sets the final location of positioned elements.

CSS positioning allows you to control an element’s position, especially to a specific point. An important thing to know about CSS positioning is to only use these properties only when it is absolutely necessary because it may cause some elements to overlap with each other.

Offset properties like left, right, bottom, and top indicate where the element should be, the z-index property is also important to positioning because it helps control overlapping elements.

There are five types of positions:

Static
Relative
Absolute
Fixed
Sticky

Static Position

Static position is the default position for elements, the elements are in a normal document flow. This means that each block level element sits on top of the next element, because this is a default postion.

The off-set properties; left, right, bottom, and top have no effect on this property. Note that you don’t need to use CSS property to indicate the position since it’s a default position.

HTML Section

<body>
    <section class="parent-element">
        <div class="sibling-element">
            <p>I'm the sibling</p>
        </div>
        <div class="other-sibling">
            <p>I'm the other sibling</p>
        </div>
    </section>
</body>

CSS Section

.other-sibling{
            position:static;
            left:10px;
            bottom:10px;
            padding:15px;
            width:20%;
            background:yellow;
        }

        .sibling-element{
            padding:10px;
            background:#f2f2;
            width:30%;
        }

Relative Position

Elements with relative positioning will remain in a normal document flow. But the offset properties are used to move the element to the desired point.

The element will move based on it’s current position, this position property is usually put in the parent element.

.other-sibling{
    position:relative;
    left:20px;
    bottom:30px;
    padding:15px;
    width:20%;
    background:green;
}

Absolute Position

Elements with absolute positioning are positioned based on their parent container or element. This completely removes an element out of the normal document flow, while it leaves the other elements in it’s former position.

The position property is usually placed in the child element

.parent-element{
    position:relative;
    padding:15px;
    width:20%;
    min-height:300px;
    background:green;
}

.other-sibling{
    position:absolute;
    left:10px;
    padding:10px;
    background:red;
    width:30%;
}

Inorder to use absolute positioning, the element must have a relative position property, it can’t be used alone.

Also it’s important to know that the relative position is used for the parent element and absolute position for the child element.

Fixed Position

It is similar to absolute positions but, the elements are positioned based on the entire browser i.e the html page. Unlike the absolute that’s positioned based on the parent container.

It should be noted that elements with fixed position remain in the same position whenever you scroll through the page.


.sibling-element{
    position:fixed;
    top: 5px;
    padding:15px;
    width:20%;
    min-height:50px;
    background:yellow;
}

Sticky Position

Sticky position is a combination of relative and fixed positioning, the element is treated as a relatively positioned until it passes a specified threshold. At this point the element is treated as a fixed positioned element.

.other-sibling{
    position:sticky;
    top:0px;
    padding:10px;
    background:red;
    width:30%;
}

OTHER POSITIONS

These two position properties are not the main position properties but are usually used along side the main position properties. Some of which are:

Z-index

This property is used when you want the elements to overlap each other, it helps to control which element sits on top the other.

The higher the value of the z-index, the more the element moves to the to of the other element.

.sibling-element{
    position:fixed;
    top: 5px;
    padding:15px;
    width:20%;
    min-height:50px;
    background:yellow;
    z-index:5;
}

.other-sibling{
    position:absolute;
    left:10px;
    padding:10px;
    background:red;
    width:30%;
    z-index:10;
}

Floats

Are used to move an element out of the normal document flow and place it as far off to the left or right as possible. Anything in the container element flows around the floated element.

.sibling-element{
    float:right;
    top: 5px;
    padding:15px;
    width:20%;
    min-height:50px;
    background:yellow;
}

I hope following this tutorial has made you understand one of the core concepts of CSS. This concept is necessary for the application of CSS in web development, in that case i wish you all the best in your journey to be a world class developer.

Caio! :aeoroplane

Kene_O