CSS Positions

Previous Next

CSS position property allows you to control the positioning of elements in relation to their container or viewport. This tutorial explains the different types of positions with examples.

1. HTML Structure

Here’s the basic HTML structure for the tutorial:

<div class="box1"></div>
<div class="box2">
  <div class="box3"></div>
</div>
<div class="box4"></div>
<p>Lorem ipsum...</p>

2. CSS Styling

The CSS uses different position values to demonstrate their effects:

.box1 {
  width: 200px;
  height: 200px;
  background-color: brown;
  position: static; /* Default */
}

.box2 {
  width: 400px;
  height: 400px;
  background-color: rgb(49, 66, 176);
  position: relative; /* Parent for absolute positioning */
}

.box3 {
  width: 100px;
  height: 100px;
  background-color: rgb(146, 194, 58);
  position: absolute;
  right: 20px;
  bottom: 20px; /* Positioned relative to .box2 */
}

.box4 {
  width: 50px;
  height: 300px;
  background-color: rgb(180, 47, 169);
  position: fixed;
  right: 20px;
  top: 100px; /* Positioned relative to the viewport */
}

3. Explanation of CSS Positions

Here’s an explanation of each position value:

Static: Default positioning. Elements are positioned in the normal document flow. (e.g., .box1)
Relative: Positioned relative to its normal position. Useful as a container for absolute positioning. (e.g., .box2)
Absolute: Positioned relative to the nearest relative ancestor. If none exists, it is relative to the document. (e.g., .box3)
Fixed: Positioned relative to the viewport, remaining in place even during scrolling. (e.g., .box4)

4. Examples of Positioning

Static Position (Default)

.box1 uses position: static, so it follows the normal flow of the document.

Relative Position

.box2 uses position: relative, which makes it a reference for any absolutely positioned children like .box3.

Absolute Position

.box3 uses position: absolute, so it is positioned relative to the nearest relative parent, which is .box2.

Fixed Position

.box4 uses position: fixed, so it is always positioned relative to the viewport and doesn’t move when scrolling.

5. Complete Code

Here’s the complete code for this tutorial:

HTML


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="position.css">
    <title>Document</title>
</head>

<body>
    <div class="box1"></div>
    <div class="box2">
        <div class="box3"></div>
    </div>
    <div class="box4"></div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, nemo, 
    delectus sint quae quidem pariatur ipsa consequatur quod explicabo quos est 
    cupiditate voluptatem eos veritatis, ducimus fugiat excepturi necessitatibus. 
    Eveniet?</p>
</body>

</html>

Run Code

CSS


.box1 {
    width: 200px;
    height: 200px;
    background-color: brown;
    position: static; /* default position */
    position: absolute;
    /* left: 500px;
    top: 300px; */
    right: 50px;
    bottom: 50px;
}

.box2 {
    width: 400px;
    height: 400px;
    background-color: rgb(49, 66, 176);
    position: relative;
}

.box3 {
    width: 100px;
    height: 100px;
    background-color: rgb(146, 194, 58);
    position: absolute;
    right: 20px;
    bottom: 20px;
}

.box4{
    width: 50px;
    height:300px;
    background-color: rgb(180, 47, 169);
    position: fixed;
    right: 20px;
    top:100px;
}

Run Code

6. Summary

By understanding the position property in CSS, you can create layouts with precise placement of elements relative to their parent, siblings, or the viewport.

Previous Next