CSS Positions

CSS (Cascading Style Sheets) provides the position property to control the positioning of elements on a web page. The position property can take several values, each influencing the positioning behavior of an element.

Photo by Sangga Rima Roman Selia on Unsplash

Here's a detailed overview:

1. static:

• Default Value: Elements are positioned according to the normal flow of the document.
• Explanation: This is the default value. Elements are positioned in the order they appear in the document flow. The top, right, bottom, and left properties have no effect when position: static; is set.

<!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="styles.css">
  <title>Static Position Example</title>
</head>
<body>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>
</body>
</html>


CSS:

.container {
  border: 2px solid #ccc;
  padding: 10px;
}

.box {
  border: 1px solid #333;
  margin: 5px;
  padding: 10px;
  /* Position is static by default */
}

2. relative:

• Usage: position: relative;
• Explanation: Elements are positioned relative to their normal position in the document flow. If you set top: 10px;, the element will be pushed down 10 pixels from where it would have been in the normal flow.

<!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="styles.css">
  <title>Relative Position Example</title>
</head>
<body>
  <div class="container">
    <div class="relative-box">Relative Box</div>
    <div class="static-box">Static Box</div>
  </div>
</body>
</html>


CSS :

.container {
  position: relative; /* Establishes a positioning context for children */
}

.relative-box {
  position: relative; /* Positioned relative to its normal position */
  top: 20px;
  left: 30px;
  background-color: #66c2ff;
  padding: 10px;
  margin-bottom: 20px;
}

.static-box {
  /* No position specified, so it defaults to position: static; */
  background-color: #ffcc66;
  padding: 10px;
}

3. absolute:

• Usage: position: absolute;
• Explanation: The element is removed from the normal document flow, and its position is relative to its nearest positioned ancestor (an ancestor with a position other than static) or the initial containing block if no positioned ancestor is found.

<!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="styles.css">
  <title>Absolute Position Example</title>
</head>
<body>
  <div class="container">
    <div class="relative-box">
      <div class="absolute-box">Absolute Box</div>
    </div>
  </div>
</body>
</html>

CSS:

.container {
  position: relative; /* Establishes a positioning context for children */
  height: 200px; /* To give some height for demonstration */
  border: 2px solid #ccc;
  padding: 10px;
}

.relative-box {
  position: relative; /* Positioned relative to its normal position */
  background-color: #66c2ff;
  padding: 10px;
}

.absolute-box {
  position: absolute; /* Positioned relative to its closest positioned ancestor */
  top: 20px;
  left: 30px;
  background-color: #ff6666;
  padding: 10px;
}

Get Snehal Vyawahare’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

4. fixed:

• Usage: position: fixed;
• Explanation: The element is removed from the normal document flow and positioned relative to the browser window. It will stay fixed in its position even when the page is scrolled.

<!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="styles.css">
  <title>Fixed Position Example</title>
</head>
<body>
  <div class="content">
    <p>This is some content.</p>
    <div class="fixed-box">Fixed Box</div>
    <p>More content here.</p>
  </div>
</body>
</html>


CSS :

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.content {
  margin-top: 50px; /* To give space for the fixed box at the top */
  padding: 20px;
}

.fixed-box {
  position: fixed; /* Positioned relative to the viewport */
  top: 10px;
  right: 10px;
  background-color: #66c2ff;
  padding: 10px;
}

5. sticky:

• Usage: position: sticky;
• Explanation: The element is treated as relative positioned until it crosses a specified point during scrolling, after which it is treated as fixed. It's a hybrid of relative and fixed positioning.

<!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="styles.css">
  <title>Sticky Position Example</title>
</head>
<body>
  <div class="container">
    <div class="sticky-box">Sticky Box</div>
    <div class="content">
      <p>Scroll down to see the effect.</p>
      <!-- Some content here -->
    </div>
  </div>
</body>
</html>


CSS:

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.container {
  position: relative;
  height: 200vh; /* To create a longer scrolling area */
}

.sticky-box {
  position: sticky; /* Positioned based on the user's scroll position */
  top: 10px;
  background-color: #ff6666;
  padding: 10px;
}

.content {
  padding: 20px;
}

Additional Properties:

• top, right, bottom, left: Used to offset the element from its normal position based on the position property.
• z-index: Determines the stack order of positioned elements. Elements with a higher z-index value are displayed on top.

Example:

.container {
  position: relative;
}
.box {
  position: absolute;
  top: 20px;
  left: 30px;
}
.fixed-box {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 100;
}

In this example, the .box class is positioned absolutely within its .container, and the .fixed-box class is fixed to the top-right corner of the viewport with a higher stacking order (z-index). Understanding these positions and their interactions is crucial for creating complex and responsive layouts in web development.

Follow me, Snehal Vyawahare, for more awesome articles on JS.

Thanks for your valuable time.