Css position

CSS positioning is a fundamental concept used to control the layout of elements on a webpage. There are several positioning types in CSS, each with specific use cases and behaviors. Here’s an overview of the main types:

(Relative). It sets the position of an element relative to its normal position.only left

(Absolute). It sets the position of an element relative to it’s parent element.top,left are enabled and bottom, right are disabled.

1. Static Positioning

Static positioning is the default positioning for HTML elements. Elements are positioned according to the normal flow of the document.

.element {
  position: static;
}

2. Relative Positioning

Relative positioning moves an element relative to its normal position. Other elements around it still follow the normal document flow.

.element {
  position: relative;
  top: 10px; /* Moves the element down by 10 pixels */
  left: 20px; /* Moves the element right by 20 pixels */
}

3. Absolute Positioning

Absolute positioning removes an element from the normal document flow and positions it relative to the nearest positioned ancestor (an ancestor with a position other than static).

.container {
  position: relative;
}

.element {
  position: absolute;
  top: 10px; /* 10 pixels from the top of the container */
  left: 20px; /* 20 pixels from the left of the container */
}

Get Roshanurkande’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

4. Fixed Positioning

Fixed positioning positions an element relative to the browser window, and it stays in that position even when the page is scrolled.

.element {
  position: fixed;
  top: 10px; /* 10 pixels from the top of the viewport */
  left: 20px; /* 20 pixels from the left of the viewport */
}

5. Sticky Positioning

Sticky positioning toggles between relative and fixed positioning depending on the scroll position. It acts like relative until the element reaches a defined scroll position, then it acts like fixed.

.element {
  position: sticky;
  top: 0; /* Sticks to the top of its container when you scroll down */
}

Examples

Here are some examples to illustrate the different types of positioning:

Relative Positioning Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Relative Positioning Example</title>
  <style>
    .relative-box {
      position: relative;
      top: 30px;
      left: 50px;
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="relative-box">Relative</div>
</body>
</html>

Absolute Positioning Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Absolute Positioning Example</title>
  <style>
    .container {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: lightgray;
    }
    .absolute-box {
      position: absolute;
      top: 30px;
      left: 50px;
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="absolute-box">Absolute</div>
  </div>
</body>
</html>

Fixed Positioning Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed Positioning Example</title>
  <style>
    .fixed-box {
      position: fixed;
      top: 10px;
      right: 10px;
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="fixed-box">Fixed</div>
  <p>Scroll down to see the fixed element remain in place.</p>
  <p style="margin-top: 2000px;">Scroll target</p>
</body>
</html>

Sticky Positioning Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sticky Positioning Example</title>
  <style>
    .sticky-box {
      position: sticky;
      top: 0;
      background-color: lightblue;
      padding: 10px;
    }
    .content {
      height: 2000px;
      background-color: lightgray;
    }
  </style>
</head>
<body>
  <div class="sticky-box">Sticky</div>
  <div class="content">Scroll down to see the sticky element stick at the top of the viewport.</div>
</body>
</html>