CSS POSITION: Absolute and Relative

paulomoro — Wed, 02 Sep 2020 11:56:49 +0000

Some months ago when i started writing CSS i got to a point where i wanted to move elements and i was tired of using only the CSS Margin property, so i was introduced to CSS positioning by my tutor, it was rough at the onset but with much effort, reading and practice i got to love and understand it better, So i decided to write about it and share my knowledge to all.

CSS Position
CSS position property as the name says, can help you change how elements is positioned on the web page.
With CSS position you can put any HTML element at whatever location you like. You can specify whether you want the element positioned relative or away from its natural position in the page or absolute based on its parent element and many more.

Syntax:
The syntax for the position CSS property is:

position: value;

Now i will love to identify the various types of CSS positioning related properties.

Types of CSS Position Property

Relative
Absolute
Fixed
Sticky
Static
Initial
Inherit

Now that we have listed the various CSS position properties, we will talk more about the two most commonly used position properties - relative and absolute

Position Relative
The relative property helps you position HTML element away from or relative to its original or natural position on the web page.
After setting the position of an element relative without adding any other positioning attributes such as (top, left, right, bottom) nothing will happen, but immediately you add the attribute left: 50px; the element moves 50px away from its original position on the web page.

Example:
In this example, you will see how the relatively positioned div element moves when its attributes are changed. The element moves to the left and top from its normal position
HTML5:

<div class="parent"> 
     <h1>position relative</h1>
 </div>

CSS:

.parent{
    position: relative;
    left: 500px;
    top: 100px;
}

Position Absolute
position absolute allows you to place an element any where on the web page.
When an element is positioned absolute the element is removed from the normal flow of the document and other elements will behave as if it’s not visible.
You use the positioning attributes top, left, bottom, and right to set the location.

Example1:
In this example, you will see how the absolutely positioned child element moves when its attributes are changed. The element moves to the left and top from its parents position.
HTML5:

<div class="parent"> 
     <h1>position relative</h1>
   <div class="child">
            <h2>position absolute</h2>
        </div>
 </div>

CSS:

.parent{
    position: relative;
    left: 500px;
    top: 100px;
}

.child{
    position: absolute;
    top: 10px;
    left: 10px;
}

Example2:
In this example, you will see how the absolutely positioned child element moves when its attributes are changed. The element moves to the left and top from the default html element itself disrupting the flow of the webpage.
HTML5:

<div class="parent"> 
     <h1>position relative</h1>
   <div class="child">
            <h2>position absolute</h2>
        </div>
 </div>

CSS:

.child{
    position: absolute;
    top: 10px;
    left: 10px;
}

Note
when using position absolute, we want to know that the values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the <html> element itself meaning it will be placed relative to the page itself.
Its overuse or improper use can limit the flexibility of your webpage.

HTML AND CSS COMMENTS, USES AND IMPORTANCE

paulomoro — Fri, 28 Aug 2020 21:50:21 +0000

What is a Comment?
A comment is an explanation or description of the source code of a program, They are piece of codes that are ignored the compiler or interpreter
The syntax of comments in various programming languages varies considerably.

Importance and Uses of Comment
As a programmer comments helps in making codes easy to understand, easy to debug and also stimulate code readability between the programmer and others.
Comments are also used to document programs and remind programmers of what tricky things they just did with the code and also helps the later generation for understanding and maintenance of code.

HTML5 COMMENTS
HTML5 comments are placed in between  tags. So, any content placed with-in  (comment)tags will be treated as a comment and will be completely ignored by the browser.

Example:

<!-- This is a HTML5 comment -->

VALID AND NON VALID COMMENTS
Comments do not nest each other, i.e a comment should not be placed inside another comment. Also when writing comments we do well to make sure that there are no spaces in the start-of comment string.

e.g
< !-- This is an invalid HTML5 comment -->
from that example we can say it is an invalid comment because a space occurs between the left angle bracket and the exclamation mark and as a result the web browser will not ignore it.


This is a valid comment because it contains no space between the left bracket and the exclamation mark.

MULTI LINE COMMENTS
So far we have seen single line comments, but HTML supports multi-line comments as well. You can comment multiple lines by the special beginning tag  placed before the first line and end of the last line as shown in the given example below.

      <!-- 
         This is a multiline comment and it can
         span through as many as lines you like.
      -->

CSS Comment
CSS uses the C-like "comment block"-style comments: /* */ . This allows for multi-line comments, and you can quickly use it to disable portions of your code.

e.g

/* css comment */

Note
Don't use comments as an excuse for unclean code. It can be tempting, when you're in a rush, to poorly write codes, then write a comment that explains what it actually does or why you took the shortcuts that you did.
This might be OK as a temporary fix, but don't make it standard practice. Instead, strive to make your code itself as clean and readable as possible. This keeps the need for comments minimal in the first place.

DEV Community: paulomoro

CSS POSITION: Absolute and Relative

HTML AND CSS COMMENTS, USES AND IMPORTANCE