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.

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>