Positioning

Position

identifies how an element is positioned on a page and whether or not it will appear within the normal flow of a document

used in conjunction with the box offset properties — top, right, bottom, and left

Static Position

position: static;

default for every element

exists in the normal flow of a document

doesn’t accept any box offset properties (i.e. top, right, bottom, and left)

Relative Position

position: relative;

allows elements to appear within the normal flow a page, leaving space for an element as intended while not allowing other elements to flow around it

the original space and position of the relatively positioned element will be preserved

allows an element’s display position to be modified with the box offset properties (i.e. top, right, bottom, and left)

box offset properties identify where an element will be moved relative to its original position

relatively positioned element may overlap, or underlap, other elements without moving them from their default position

Absolute Position

position: absolute;

will not appear within the normal flow of a document

the original space and position of the absolutely positioned element will not be preserved

moved in relation to their closest relatively positioned parent element (if none is present: relative to <body>)

if no relatively positioned parent exists, in relation to the <body> element

absolutely positioned element and not specifying any box offset property will position the element in the top left of its closest relatively positioned parent

if top&bottom or right&left and no height and width, respectively, are specified, then the element will span the entire way.

Fixed Position

position: fixed;

positioning is relative to the browser viewport, and it does not scroll with the page

using multiple box offset properties, see position: absolute;

Use Cases

fixed header or footer

Box offset properties

top:
right:
bottom:
left:

specify how elements may be positioned, and in which direction

only work on elements with a relative, absolute, or fixed positioning value

relatively positioned element: relative to its default position
absolutely or fixed positioned element: relative to parent's position

if top and bottom values specified: top property will take priority

if left and right values specified: left property will take priority (for English, German, etc. but not Arabic: right)

z-Index

z-index: 1;
z-index: 500;

Default: Elements coming at the top of the DOM are positioned behind elements coming after them.

The element with the highest z-index value will appear on the top regardless of its placement in the DOM.

must first apply a position value of relative, absolute, or fixed

Stacking context

create a new stacking context

isolation: isolate;

Display

display: block;
display: inline;
display: table;

`block`

Block-level elements begin on a new line, stacking one on top of the other

occupy any available width

may be nested inside one another

may wrap inline-level elements

default width: 100%

default height: determined by element's content

`inline`

lining up one after the other

only maintain the width of their content

may be nested inside one another

cannot wrap block-level elements

ignores any height or width property values (default for <span>)

margin-top and margin-bottom are not accepted

padding-top and padding-bottom are accepted (may blend into the line above or below the given element, though)

`table`

much like block-level elements

`inline-block`

will display elements within a line (while allowing them to accept all box model properties)

if width is too large, try removing white spaces in HTML

usually a small space will exist between two inline-block elements

`flex`

`grid`

`contents`

causes an element's children to appear as if they were direct children of the element's parent

.parent {
   display: grid;
}
.element {

}
display: contents;
grid-area: 1 / 1;

`none`

completely hide an element and render the page as if that element doesn’t exist
any elements nested within this element will also be hidden

Hide any element

.hidden {
        display: none;
}

Floats

float: left;
float: right;

element to be floated to the left or right of their parent element

element is removed from the normal flow of a page

width of that element to default to the width of the content within it

the float property relies on an element having a display value of block (display value might be changed to block)

??? margin applied to left, if float left?

Examples

two-column layout
content wraps around floating picture

Clear

clear: left;
clear: right;
clear: both;

prevent content from wrapping around floated elements

clear has to be applied to an element appearing after the floated elements, not before, to return the page to its normal flow

Contain ("clearfix", "cf")

/*
    Clearfix
*/

.group:before,
.group:after {
    content: "";
    display: table;
}

.group:after {
    clear: both;
}

.group {
    clear: both;
    *zoom: 1;
}

add to any container element that will contain a float

floated elements must reside within a parent element with the class group

Inline boxes

White space

white-space: no-wrap;

Box-decoration

box-decoration-break: clone;

Lorem ipsum, dolor sit with box-decoration-break

Lorem ipsum, dolor sit without box-decoration-break

.inline-box {
  display: inline;
  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
}

Positioning elements - making grids

floats
inline-block elements
position property
display: flex
display: grid

Floating elements

a parent element has a height of zero if all of the elements nested within it are floated.

Clearing Floats

Set clear: both; on an empty element just before the parents' closing tag.

Overflow Technique

Set overflow: auto; or overflow: hidden; on the parent element containing the floats. Also specify

.parent {
    width: 100%;
    overflow: auto;
}

Clearfix Technique

.group:before,
.group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    *zoom: 1;
}

Example: Box centered in body / container

<div class="container">
  <div class="box"></div>
</div>

Flexbox

.container {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
}
.box {
   width: var(--pu_width);
   height: var(--pu_height);
   max-width: 100%;
   max-height: 100%;
}

Grid

.container {
  display: grid;
  place-items: center;
}
.box {
   width: var(--pu_width);
   height: var(--pu_height);
   max-width: 100%;
   max-height: 100%;
}

Absolute position

.container {
   width: 100%;
   height: 100%;
}
.box {
   --pu_height: 800px;
   --pu_width: 800px;
   position: absolute;
   top: calc(50vh - calc(var(--pu_height) / 2));
   left: calc(50vw - calc(var(--pu_width) / 2));
   width: var(--pu_width);
   height: var(--pu_height);
   max-width: 100%;
   max-height: 100%;
}

Margin trick

.container {
   width: 100%;
   height: 100%;
}
.box {
   --pu_height: 800px;
   --pu_width: 800px;
   width: var(--pu_width);
   height: var(--pu_height);
   max-width: 100%;
   max-height: 100%;
   margin: 50% auto 0 auto;
   padding-top: -50%;
}

Example: stacked elements

<div class="parent">
   <div class="back"></div>
   <div class="front"></div>
</div>

position: absolute

.parent {
   position: relative;
}
.back {
   position: relative;
}
.front {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

grid-area: 1 / 1

.parent {
   display: grid;
}
.back, .front {
   grid-area: 1 / 1;
}

Example: Scrollable box with `flex`-centered children

<div class="content">
    <div class="box">
        <div class="column">Column 1</div>
        <div class="column">Column 2</div>
        <div class="column">Column 3</div>
    </div>
</div>

.content {
    flex: 1;
    display: flex;
    overflow: auto;
}
.box {
    display: flex;
    min-width: min-content;
}