CSS - Fixed Positioning (Anchored viewport positioning)

About

fixed positioning is a positioning scheme where the offsets (coordinates) are calculated relative to an anchored viewport. (ie the visible part of the window, an iframe, ..).

anchored means that scrolling will not affect the position of the box whereas in a absolute positioning it does (The absolute box goes away when scrolling).

In other word, the containing block (ie from where the offsets (coordinates) apply), is an anchored viewport.

sticky positioning is fixed positioning scheme that is triggered only when scrolling to a certain position.

Example / Demo

Bottom Right of the viewport

  • The containing box is the body. A body element is a block box by default and has the default static position value.
body {
    height:300px; /* to have a page with a width - fixed element does not participate in the height of a page */
    border: 2px solid steelblue; /* to see the body */
    margin: 0px /* to see the border of the box touching each other */
}
  • The fixed position
.fixed_box {
    position:fixed; /* making this box fixed */
    border: 2px solid red; /* to see the box */
    margin: 0px; /* to see the border touching the viewport */
    bottom:0; right:0; /* bottom right position */
    max-width:200px; /* to constraint the text in a box with a max width and not the whole width */
}
  • The HTML page with a little bit of text and the fixed_box that will stay in the same position while scrolling whereas an absolute box will not
Body
<p class="fixed_box">Fixed box will stay at the Bottom Right of the window while scrolling whereas an absolute box,  it will not.</p>
  • Result: If you scroll, the fixed box will stay in its position

Ancestor / Parent have no effect on fixed boxes

  • The containing box is a div element. A div element is a block box by default and has a static positioning by default..
.absolute_box {
    position:absolute;
    border: 2px solid steelblue;
    top: 0;
    right: 0;
    max-width: 200px;
}
  • The absolute position is based on the first relative containing box.
.fixed_box {
    position:fixed;
    border: 2px solid red;
    margin: 0px;
    bottom:0;
    right:0;
}
  • Absolute and fixed boxes does not affect the height of a box, we need to add an height on the body.
body {
   height: 300px
}
  • The HTML with a fixed box in absolute box to demonstrate that the absolute box (and any other box position such as relative, static) has no effect on the position of a fixed box.
<div class="absolute_box">
An absolute box (top right) with the fixed box as child and has no effect on the positioning of a fixed box.

<p class="fixed_box">A fixed position - Bottom Right of the viewport of the window</p>
</div>





Discover More
CSS - (Box) Positioning (Scheme)

CSS This section is all how boxes are positioned / laid out on the page. boxcontent (text, image) a box located at the right side and its content at the left side a box taking the whole width...
CSS - Absolute Positioning (Relative / Absolute / Fixed > Absolute or Static > Absolute )

absolute positioning is a positioning model that occurs when a box has the absolute value as position property. When this is the case, the absolute box is positioned: * from the first ascending box...
CSS - Bottom Property

The bottom property is the offset from the bottom edge of the . It applies only if the box itself has a position value of: relative absolute or fixed staticleftnormal flow positioning model ...
CSS - Left property explained as 1, 2, 3

The left property is an offset from the left edge of the containing block. This article shows you in two simple rules how to determine the containing block.
CSS - Position - Offset Properties (Left, Right, Top, Bottom)

The Offset CSS Properties of a box are top, left, right, bottom They are applied to the containing box in the following positioning model in order to position a box. relative absolute...
CSS - Right Property

The right property is the offset from the right edge of the . It applies only if the box itself has a position value of: relative absolute or fixed staticrightnormal flow positioning model ...
CSS - Sticky positioning (Pinning)

Sticky is a positioning option that: keeps the box in view (ie in the viewport)) within its containing block as the user scrolls. From a logical point of view, the element is treated: first...
CSS - The containing box

The containing box is a box that is used in the positioning of element on the page
CSS - Top Property

The top property is a offset property that specifies how far is positioned the box from the top edge of its . It applies only if the box itself has a position value of: relative absolute or fixed...



Share this page:
Follow us:
Task Runner