Skip to content

06.css-position-property.md

Latest commit

 

History

History
68 lines (49 loc) · 3.17 KB

06.css-position-property.md

File metadata and controls

68 lines (49 loc) · 3.17 KB

Position Property

In CSS, the position property is crucial for determining how an element is placed on a webpage. There are five main types of positioning: static, relative, absolute, fixed, and sticky.

Static Positioning

  • Default Behavior: This is the default position for all HTML elements. An element with position: static; is positioned according to the normal flow of the document.
  • Characteristics: You cannot use top, bottom, left, or right properties with a static position. The element will not be affected by these properties and will always stay in its natural place in the layout.

Relative Positioning

  • Adjustment from Normal Position: An element with position: relative; is first laid out just like a static element. After this, it can be moved around relative to its original position in the layout.
  • Offset Properties: You can use top, right, bottom, and left to move the element from its original position. Other content will not adjust to fill the space vacated by the element.

Absolute Positioning

  • Position Relative to Ancestor: An element with position: absolute; is removed from the normal document flow. It is then positioned relative to its nearest positioned ancestor (if any), or otherwise relative to the initial containing block.
  • Usage of Offset Properties: top, right, bottom, and left properties are used to position the element specifically within its container. The space originally occupied by the element in the document flow is no longer reserved for it.

Fixed Positioning

  • Viewport Relative Position: An element with position: fixed; is positioned relative to the browser's viewport and does not move when scrolled.
  • Stays in Place: This is often used for navigation menus or buttons that should remain visible on the screen as the user scrolls the page.

Sticky Positioning

  • Toggle Between Relative and Fixed: An element with position: sticky; toggles between relative and fixed positioning based on the user's scroll position.
  • Specified Offset: It's positioned as relative until a given offset from the viewport is reached during scrolling, at which point it becomes fixed.

HTML Example:

<div class="relative-container">
  <div class="absolute-child">Absolute</div>
</div>
<div class="fixed-element">Fixed</div>
<div class="sticky-element">Sticky</div>

CSS Example:

.relative-container {
  position: relative;
  height: 100px;
  background-color: lightblue;
}

.absolute-child {
  position: absolute;
  top: 10px;
  left: 10px;
}

.fixed-element {
  position: fixed;
  bottom: 0;
  right: 0;
}

.sticky-element {
  position: sticky;
  top: 0;
  background-color: yellow;
}

In the provided example, .absolute-child is positioned absolutely within .relative-container, meaning it will be placed 10 pixels from the top and left of its parent. The .fixed-element is fixed to the bottom right of the viewport, staying in place during scrolling. The .sticky-element behaves like a relative element until it reaches the top of the viewport during scrolling, at which point it becomes fixed.