CSS BOX MODEL AND DISPLAY POSITIONING.

5 min readJan 23, 2020

CSS BOX MODEL:

The CSS box model s a container which contains multiple properties (different parts of a box) — margin, border, padding, and content — which work together to create the design and layout of web pages.

The figure below illustrates the box model:

Parts of a CSS box model are as follows:

Content box: This is the area where your content is displayed, which can be sized using properties like width and height.
Padding box: The padding sits around the content as white space; its size can be controlled using padding and related properties.
Border box: The border box wraps the content and any padding. Its size and style can be controlled using border and related properties.
Margin box: The margin is the outermost layer, wrapping the content, padding and border as whitespace between this box and other elements. Its size can be controlled using margin and related properties.

A brief practical example illustrating the box model: The diagrams below show a code snippet were the first<h1> element, with the content, “OLUWAFUNMILAYO” assigned: margin :50px, padding :60px, border: 5px solid grey; while the second <h1> element, with the content “DADA” assigned: margin :50px, padding :3px, border: 3px solid black. Background colours were assigned to both <h1> elements for vivid description and visibility to differenciate the parts of a CSS box model.

DISPLAY POSITIONING

If you want to create an element that floats over the top of other parts of the page, and/or always sits in the same place inside the browser window no matter how much the page is scrolled? Positioning is just the tool we need.

Positioning is a CSS property that help you specify how to place the position of elements on your webpage. Positioning allows you to take elements out of the normal document flow, and make them behave differently; for example sitting on top of one another, or always remaining in the same place inside the browser viewport.

There are a number of different types of positioning values that you can put into effect on HTML elements. They are as follows:
- Static Positioning
- Relative Positioning
- Fixed Positioning
- Absolute Positioning
- Sticky Positioning

Static positioning is the default that every element gets — it just means “put the element into its normal position in the document layout flow — nothing special to see here.” Static positioning elements are not affected by the top, bottom, left, and right properties.

EX:

No changes in document flow. — no changes in document flow.

Relative positioning: Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element,except that once the positioned element has taken its place in the normal document flow, you can then modify its final position, including making it overlap other elements on the page.

the red rectangular box has adjusted away from its normal position and overlpped the pink box.

Fixed Positioning: fixed positioning fixes an element in place relative to the browser viewport itself. This means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.This means that you can create useful elements that are fixed in place, like persisting navigation menus.

the red box has fully overlapped the box when the page was scrolled downward

Absolute positioning: absolute positioning fixes an element in place relative to the html element or its nearest positioned ancestor. The top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position, However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

the red box is an absolute positioned element with no positioned ancestors, thus using the <body> element.

Position Sticky: Sticky positioning is somewhat newer than the others. This is basically a hybrid between relative and fixed position, which allows a positioned element to act like it is relatively positioned until it is scrolled to a certain threshold point (e.g. 50px from the top of the viewport), after which it becomes fixed. An example is a navigation bar scrolling down the page until a certain point, and then stick to the top of the page.