Understand absolute, relative, and fixed positioning in CSS

CSS (Cascading Style Sheets) is a powerful tool that allows web developers to control the layout and appearance of their web pages. Among the many CSS properties available, the position property plays an important role in the position of elements on a web page. The three most commonly used values ​​for position ownership are "absolute," "relative," and "specific." In this article, we will explore each of these values, understand the differences, and see how to apply them in your web projects.

1. Location:

The "position: absolute" property allows you to position the element relative to its nearest ancestor. If there is no positionable ancestor, it will be positioned relative to the document type (browser window). If an element is defined as "position: absolute", it is taken out of the normal document flow, meaning that other elements are ignored when they determine their position.

Implementation:

Let's say our HTML structure looks like this:

<div class="container">
  <div class="box"> </div>
</div>

Now, we can apply the "position:absolute" property to the ".box" class in CSS:

.container {
  position: relative /* Required to position absolute elements relative to this container */
  width: 400px;
  height: 300px;
  background-color: light;
}

.box {
  position: absolute;
  top: 50px;
  left: 100px;
  width: 100px;
  height: 100px;
  background-color: red;
}

In this example, the ".box" element will be positioned 50 pixels from the top and 100 pixels to the left of its closest ancestor, the ".container" element.

1. Location:

The "position:relative" position of an element relative to its default position in the document flow. Unlike "absolute", the element will still occupy its original position and will be ignored by other elements during positioning. When using positioner:relative , you can move an element from its original position using the top, bottom, left, and right properties.

Implementation:

See the HTML structure as before:

<div class="container">
  <div class="box"> </div>
</div>

Now, we will apply the "position:property" attribute to the ".box" class:

.container {
  width: 400px;
  height: 300px;
  background-color: light;
}

.box {
  status: relative
  top: 20px;
  left: 30px;
  width: 100px;
  height: 100px;
  background-color: red;
}

In this example, the ".box" element is 20.

1. Location:

The "position: fixed" property is similar to "absolute", but the position of the element is relative to the browser view, regardless of rotation. This means that even if the user scrolls the page, certain elements will remain in the same position. It is commonly used to create elements such as fixed navigation bars or floating headers.

Implementation:
See an example of a simple fixed navigation bar:

<div class="navbar">
  <ul>
    <li> <a href="#">Home</a> </li>
    <li> <a href="#"> About </a> </li>
    <li> <a href="#">Communication</a> </li>
  </ul>
</div>

CSS for custom navigation bar:

.navbar {
  status: defined;
  top: 0;
  left: 0;
  width: 100%;
  background-color: # 333;
  color: #fff;
}

.navbar ul {
  list style: none;
  padding: 0;
  limit: 0;
  display: flex;
}

.navbar li {
  margin-right: 20px;
}

.navbar li : last child {
  margin-right: 0;
}

In this example, the navigation bar will be positioned at the top of the viewport and will remain there even when the user scrolls the page.

Result:

Understanding how to use the 'position' property in CSS is essential to creating structured and visually appealing web layouts. Using positioner:absolute, positioner:relative, and positioner:fixed, you can control the position of elements on your web page with precision and flexibility. Experiment with these properties to improve the design and user experience of your web projects.