DEV Community: Chisom🦄

Understanding CSS Positioning

Chisom🦄 — Thu, 29 Sep 2022 15:41:31 +0000

The CSS position property is one of those things that has been around for quite sometime, it is necessary to learn if you are goin to be working on the web. CSS allows us use different methods to position elements. This article will give us a better understanding on CSS positioning, in this article we will learn about the various of the CSS position property and how to move elements based on its top, bottom ,right, and left positions, any CSS unit of measurement can work (em, px, etc). You need to understand HTML and the basics of CSS.

What is CSS position property?
The CSS position property is used to position an element in a document, it allows us to define where element boxes are going to be on the web page. The CSS position property is used to position an element in a document, it allows us to define where element boxes are going to be on the web page relative to their usual starting position or relative to their parent elements.

The five main values the position property can take are;

Static positioning
Relative positioning
Absolute positioning
Fixed positioning
Sticky positioning

Let's discus,

Static positioning

Position:static is the automatically applied property, static elements cannot be moved, it means that the element follows the normal document flow. They are not affected by the top, bottom, right and left properties. It is the default positioning
value.

Let's use an example to illustrate;

HTML

‹div class="parents">
    ‹div class="divs">
    <div class="One">Div One</div>
    ‹div class="Two">Div Two</div>
    <div class="Three >Div Three</div>
    ‹div class="four ›Div Four</div>
    </div>
    </div>

CSS

 div.two{
     position:static;
     top:50px;
    }

The result.

You will notice there is no change, which confirms that the top, bottom, left and right properties do not affect an element in position static.

Relative Positioning
It takes the element from the original position and moves it to any position you want it to be, it lets you change an elements position, to change the position you need to apply the top, bottom, right, and left properties and specify where you want to move the element. Elements are not removed from the normal document flow, It is positioned according to it's original position.

Example.

HTML

 <div class=”box”>
     <div class=”item”></div>
     <div class=”item”></div>
    </div>

CSS

.box{
     width: 400px;
     height: 400px;
     border: 5px solid black;
     margin:20px auto;
    }
    .item1,.item2{
     width: 150px;
     height: 150px;
    }

    .item1{
      background-color: #508AA8;
      position: relative;
      left: 20px;
    }
    .item2{
      background-color: #6F1A07;
    }

The result.

In relative positioning nothing happens until we use one of the offset properties(top, bottom, left and right) to offset it.

The Positive values move the element away from the name side but negative values move the element to the name direction.

Absolute positioning
In this position the elements are removed from the normal document flow. It is not positioned according to elements original position, absolute positioning are positioned differently from relative elements, they are positioned according to the nearest containing elements, the containing element or the nearest parent element that has a position. Their is always a parent element that comes into play with absolute positioning. It's final position is determined by the top, bottom, right, and left values.

For example;

HTML

<div class=”box”>
     <div class=”item”></div>
     <div class=”item”></div>
    </div>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
    anim id est laborum.</p>

CSS

.box{
     width: 400px;
     height: 400px;
     border: 5px solid black;
     margin:20px auto;
    }
    .item1,.item2{
     width: 150px;
     height: 150px;
    }

    .item1{
      background-color: #508AA8;
      position: absolute;
      bottom:0px;
    }
    .item2{
      background-color: #6F1A07;
    }

The result.

If you want this position relative to the box all you have to do is add position:relative to our box.

For example.
HTML

 <div class=”box”>
     <div class=”item”></div>
     <div class=”item”></div>
    </div>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
    anim id est laborum.</p>

CSS

 .box{
     width: 400px;
     height: 400px;
     border: 5px solid black;
     margin:20px auto;
     position: relative;
    }
    .item1,.item2{
     width: 150px;
     height: 150px;
    }

    .item1{
      background-color: #508AA8;
      position: absolute;
      bottom:0px;
    }
    .item2{
      background-color: #6F1A07;
    }

The result.

Fixed positioning
The elements are also removed from the normal document flow. It is always fixed according to the viewport what is visible on the screen), it work's basically the same way absolute positioning works except the parent element is always the viewport. Even if the page is scrolled they stay exactly at the same position. It guarantees you it's always going to be there.

Example.

HTML

<div class=”box”>
     <div class=”item”></div>
     <div class=”item”></div>
    </div>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
    anim id est laborum.</p>

CSS

.box{
     width: 400px;
     height: 400px;
     border: 5px solid black;
     margin:20px auto;
     position: relative;
    }
    .item1,.item2{
     width: 150px;
     height: 150px;
    }

    .item1{
      background-color: #508AA8;
      position: fixed;
      left: 50px;
    }
    .item2{
      background-color: #6F1A07;
    }

The result.

The box is fixed, it is always going to be stuck to our viewport.

Sticky Positioning
Position:sticky is used to position the elements based on the scroll position of the user. It is the containing element, it is similar to absolute positioning but only where certain conditions are met then it acts like fixed positioning. Sticky positioning is not supported in all web browsers.

For example.

<h1>My Website</h1>
    <h1>Cool</h1>

    <nav>
     <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
     </ul>
    </nav>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
    anim id est laborum.</p>

CSS

nav{
     background-color: #6F1A07;
     color: white;
     position: sticky;
     top: 0;
    }

    p{
     width: 30%;
    }

The result.

In the example above we notice that, the home, about and contact, are stuck to the top, it is going to switch between static positioning and fixed positioning.

Understanding CSS positioning

Chisom🦄 — Wed, 28 Sep 2022 11:01:33 +0000

Liquid syntax error: Tag '{%' was not properly terminated with regexp: /\%\}/

Scopes of variables in JavaScript

Chisom🦄 — Mon, 26 Sep 2022 11:20:58 +0000

Introduction
The scope is the life of a variable, it holds the present set of variables and their values, variables in JavaScript work differently from other languages. In this article, we will talk about variable scopes in JavaScript, the types, and how to declare them. This article will help you if you are learning JavaScript.

What are Variable Scopes In JavaScript?
Scope refers to where a variable is declared and where it can be accessed, that is an area where you can use it. It is the visibility of variables, variables are not visible outside the scope in which they are declared which means they either exist outside or within the scope they are declared. JavaScript variables are declared with the ‘var’ keyword.

Types of variable scopes
We have two types of variable scopes namely;

Global scope
Local scopes

Let's dive in;

Global Scope
In global scope, variables are not declared inside a function they are declared outside of a function, which means they work from outside the function, they can be accessed and modified by any function.

Let's look at an example;

`var userName = "Jane";

function modifyUserName(){
userName = "Chisom";
};
function showUserName () {
alert (userName);
};
alert (userName);
modifyUserName ();
showUserName();

`
In the example above, the variable userName is the global scope because it is declared outside the function, the value of a global variable can also be changed inside the function that simply means that even though my variable is declared I can use it from inside my function.

In browser environment the global scope variables are controlled by window object but in node.js it is controlled by global object.

Variables declared without var keyword inside any function is automatically a global variables.

Global variables are mostly used for programming and are useful for cases where all the functions need to access the same data, we cannot declare many variables with the same name.

Local Scope
In local scope, variables are declared inside a function, It can be accessed only inside the function where it is declared.

For example;

`function modifyUserName(){
var userName = “Jane”;
};
function showUserName () {
alert (userName);
};
alert (userName);
modifyUserName ();
showUserName();`

The variable “userName” in the example above is accessible inside the function. Since we cannot access a local variable outside it, the compiler generates an error.

The same name of a local variable can be used in different functions because it is only recognized by the function which it is declared, when the function is executed a local variable is created.

Note: if local variables and global variables have the same name then changing the value of one variable does not affect the value of the other variable.

`var userName = "Jane";

function modifyUserName(){
var userName = "Chisom";
};
function showUserName () {
alert (userName); // “Chisom”
};
alert (userName); // Jane
modifyUserName ();
showUserName();`

Any change in the local variable does not affect other functions of the program.

It can only be accessed by the function statements in which it is declared.

Conclusion
In JavaScript, scopes are created by code blocks, functions, modules.

Variables scopes are meant to be understood by every developer. In this article, we went over what variable scope is, and the types of variable scopes. I hope this article helped you understand the scopes of variables in JavaScript.