CSS: Position & Layout

-

 

CSS Position & Layout

We can use the position property to control the layout and position of an element on a webpage.

There are five different position values:

  • static - the default value (it does not need to be specified)
  • relative
  • fixed
  • absolute
  • sticky

I. position: static;

HTML elements have static value by default.

It doesn’t have special positioning qualities but keeps the element in a normal page flow.

II. position: relative;

If we set an element’s position relative, we can shift the element around the page relative to its original position.

We can adjust the position with the following properties:

  • top: moves the element down.
  • bottom: moves the element up.
  • left: moves the element right.
  • right: moves the element left.

Example: The following code will set H2 away from the left by 20 pixels and move it from the bottom of its original position by 20 px.

h2 {
  position: relative;
  left: 20px;
  bottom: 20px;
}

III. position: fixed;

position: fixed; will position the element relative to the viewport, so it always stays in the same place even if the page is scrolled.

Example: We can set our Navbar to be fixed at the top of the viewport.

.navbar {
  position: fixed;
  top: 0px;
  left: 0px;
}

IV. position: absolute;

position: absolute; allows us to position elements absolutely relative to their closet parent that has also been given a position property that is not static.

However, if an absolute positioned element has no positioned parents, it uses the document body and moves along with page scrolling.

#area-1 {
  position: absolute;
  left: 20px;
  top: 20px;
}

V. position: sticky;

Sticky is a combination of static and fixed.

It’s static at the beginning but becomes fixed when the scroll position on a page reaches a certain point.

#nav {
  position: sticky;
  top: 150px;
}

VI. Z-index

z-index property specifies the order of an element.

By default, all elements have a z-index of 0, so a positive z-index(1, 2, etc.) will place that element on top of the other elements.

z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).

.navbar {
  z-index: 1;
}

Comments

Post a Comment

Popular posts from this blog

JavaScript: How to create an array of unique values using Set?

-
  How to create an array of unique values using Set? ES6 introduces Set, which returns unique values This article will go through how to remove duplicates and create an array of unique values ES6 Set. What is ES6 Set? The Set object is a data type that can store unique values without any particular order. We can pass in a parameter, and all of its elements will be added to the new Set. const result = new Set (parameter); How to create an array with unique values? For example, we want to create a new array with unique category values. const food = [ { name : "egg" , category : "breakfast" , }, { name : "burger" , category : "lunch" , }, { name : "steak" , category : "dinner" , }, { name : "chicken" , category : "lunch" , }, { name : "eggs" , category : "breakfast" , }, { name : "spaghetti" , category : ...
Read more

JavaScript: Constructor Function in Objects

-
  Constructor Function In this article, we will learn the constructor function and its usage. I. What is the constructor function? A constructor function is a function to create an object. II. How to create a constructor function? When we create a constructor function, we should capitalize the function’s name. Then, we pass in the properties we want to set in the parameters. We use the keyword  this  to set them as the object’s properties. Avoid using  arrow functions  when using  this  in a method. function Person ( name, birthDay, color ) { this .name = name; this .birthDay = new Date (birthDay); this .color = color; } III. Create an object instance Once we have an object constructor, we use the  new  keyword to create new objects of the same type. const p 1 = new Person( "Anna" , "3-25-1995" , "green" ); const p 2 = new Person( "Joe" , "10-12-1990" , "blue" ); console .log(p 1 ); // Person {name: "Anna...
Read more

JavaScript: Basics

-
  Basics I. Syntax 1. semi-colons; In Javascript, every expression needs a semi-colon at the end. An expression is a line of code that returns a value. Statements that are not expressions don’t need semi-colons. // variable is an expression. const x = 2 ; // function is a statement. function hello ( ) {} if (x > 1 ) { // if is statement console .log( "Hello World" ); // console.log is expression } 2. { curly braces } Curly braces identify JS objects and code blocks such as functions, conditional statements, and loops. // function function hello ( ) {} // if if (condition) { // code... } // loop for (condition) { // code... } // JS object const obj = { key : "value" } 3. console.log The console is a panel that displays important messages. Data can be printed or logged to the console with  console.log() . > console.log ( 'hello' ) hello 4. Comments Comments can explain the purposes, leave instructions for other develo...
Read more