CSS — Position, Z-Index, Opacity

Position, Z-Index, Opacity

Position

Floating and Positioning are almost the same, but floating makes elements float to the edge of the page. Doesn’t matter what’s the size of the page.
Although positioning is used for a more precise position of an element on the webpage.

Relative Position

#first-div {
 color: green;
 background-color: yellow;
 width: 100px;
 position: relative;
 left: 200px;
}

Here we have set the position to “relative” which means that it will position the element exactly where it was before. But now we can add another property like “left: 200px” and position the element. (It is important to set the position to “relative” before adding any other position.)
It basically adds a 200-pixel margin to the left of the element and the element itself slides 200 pixels in the opposite direction.

Code for Positioning

Output for Positioning

You can also slide it to the right by adding negative value.

left: -200px;

It will completely remove the element from the webpage and it will come in handy when we will create some sliding animation in the jQuery section.
Similarly, you can position the top and bottom too.

top: 100px;
bottom: 200px;

You can use relative positioning to any HTML element (i.e., form, table, list, image, link, etc).

Absolute Position

Now let’s have a look at “absolute” positioning:
Absolute positioning takes the element and places it out of the flow of the page. So it will cover other elements on the top left. It can be very useful when you want to ignore everything and make an element stick to the top of the webpage.

Absolute Positioning Code

Absolute Positioning Output

Fixed Position

Now let’s have a look at “fixed” positioning. It’s the same as the “absolute” positioning but the difference is that it fixes the element at that specific position. It comes very in handy when you want to make a navigation bar that stays fixed on top even when you scroll down to the page.

#first-div {
 color: green;
 background-color: yellow;
 width: 100px;
 position: fixed;
}
#second-div {
 color:red;
 background-color: blue;
 width: 100px;
 height: 5000px;
}

Z-Index

Now when you get two elements overlapping each other and you want a specific element to come on top, then you can use z-index. The element with more z-index value will be in front and the element with less z-index value will be behind.

#first-div {
  color: green;
  background-color: yellow;
  width: 100px;
  position: relative;
  top: 150px;
  z-index: 1;
}
#second-div {
  color: red;
  background-color: blue;
  width: 100px;
  top: 30px;
  position: relative;
  z-index: 2;
}

Now the element in the second div will be in front because it has more z-index value.

Code for z-index

Output for z-index

Opacity

To make an element transparent we use the opacity property where the value of opacity is as:
0 = Completely Transparent (but the element is still there)
1 = Default Look

You can add values between 0 & 1 according to your need for transparency.(i.e., 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1)

#first-div {
 color: green;
 background-color: yellow;
 width: 100px;
 position: relative;
 left: 20px;
 z-index: 1;
 opacity: 0.5;
}

Opacity in CSS

This could be really helpful when you want to add text to an image.

Play around with these properties with different elements and have fun. Try to make a navbar.

Instructor ~ TARUN KUMAR

LAZY SYNTAX