CSS Lesson 18: Positioning

0
21

Introdution to CSS Positioning

Here is another mind-blowing CSS lesson! CSS Positioning is little complex to understand, so be quiet and pay attention! If I have to tell you one. more. time…..! Nah, just practice, you’ll get the hang of it.

CSS Positioning allows you to position your HTML element from its actual position. Additionally, you can overlap the content. Basically, it converts the HTML Elements into layers, hence; you can change their position. CSS Positioning is easier to code and with a single word you can move your content to the top, bottom, left or right.

In this lesson you will learn about the four CSS positioning properties. These are as follows:

Static Positioning

Static Positioning is the default position of an HTML element. This property doesn’t affect the overall behavior of an element. Here’s the syntax of it:

[tooltip]You can not define any top, bottom, left or right properties for Static Positioning.[/tooltip]

Relative Positioning

Relative positioning is very similar to Static positioning unless you define other CSS properties. Basically, it positions relative to the normal position of the content. You can define the top, bottom, left and right values to adjust your elements accordingly. The values for top, bottom, left and right can be negative.

Source Code Output

This text is normally positioned

This text is positioned relateivly 20px from left

[tooltip]Please note:You see how an HTML element is positioned relatively. It is not limited to text; you can position an image as well.[/tooltip]

Important Notes: Defining a negative value can affect your positioning in the following ways:

  • Move Up – Use a negative value for top.
  • Move Down – Use a positive value for top.
  • Move Left – Use a negative value for left.
  • Move Right – Use a positive value for left.

Fixed Positioning

Fixed position makes HTML elements fixed to a certain place. Importantly, even if you scroll down or above the page, the HTML element stays fixed. Interesting, isn’t it? To fix a content at a specific place, you should define the top, left, right or bottom value of it.

Source Code Output

This text is normally positioned

This image is fixed
Css-logo

[tooltip]Note: The image on the bottom right of the page is because of a fixed property. Cool, huh! [/tooltip]

Absolute Positioning

Absolute positioning is the most tricky part, because it’s a combination of fixed and relative positioning. In this positioning, the HTML content behaves like a fixed but it is relative to the nearest-positioned ancestor or ‘parent’ content. For example, you have placed a heading within a paragraph tag, so the paragraph tag is a parent of the heading. This means if you want to position a heading, you must consider the dimension of the paragraph tag. Confused? Here’s the demonstration of it:

Source Code Output


This bold text is positioned absolute to this paragraph.


You see! The bold is positioned absolute w.r.t its parent (paragraph) element. Practice and become a master of it!

Overlapping

Overlapping is not a property of CSS positioning. Basically, it is an extension of positioning properties. You can use the absolute, relative or fixed property to overlap the elements. z-index is a property we will use to overlap the elements. Suppose you want to overlap the text over an image, here is a simple demonstration of it:

Source Code Output

CSS allows to overlap the content over other using z-index property

This text is underneath of other text due to overlapping property.

You See! It’s easy to overlap the HTML elements with CSS. Otherwise, you have to go through bunch of JavaScript codes to do it.

Summary

  • CSS Positioning allows you to position the HTML element.
  • Static positioning is a default position of the HTML element.
  • Use Relative positioning to position content relative to normal content.
  • Fixed positioning, fixes the HTML element.
  • Absolute positioning, positions the content w.r.t to parent tag.

Next Lesson

In this lesson you learned how to position the HTML element. In the next lesson you’ll learn how to Float the HTML content using CSS.

Leave a Reply