/html-and-css

HTML and CSS knowledge and examples created for myself from fundamentals to more

CSS

Position

Position

Position Removed from flow of document Relative to
relative No, treated as still in normal flow Relative to the element's original position
absolute Yes, treated by other elements as it was not there Relative to the nearest positioned ancestor, ie, nearest non-static ancestor. If such ancestor can't be found, the element will be relative to document
fixed Yes, treated by other elements as it was not there Relative to the document. The element will not be affected by scrolling.

Example

absolute

See the Pen css-position-absolute by Emily (@eqlzh) on CodePen.

fixed

See the Pen css-position-fixed by Emily (@eqlzh) on CodePen.

Selector

  • Descendant combinator
  • Child combinator
  • pseudo class
  • pseudo element

Example

See the Pen css-selectors by Emily (@eqlzh) on CodePen.

box-sizing

Explanation Dimension of the element Example
content-box Width, height properties include content, not including padding, border, margin Width = width of the content Height = height of the content .box {width: 350px; border: 10px solid black;} -> renders a box that is 370px wide.
border-box Width, height properties include content, padding, border, not including margin width = width of the content + padding + border; Height = height of the content + padding + border .box {width: 350px; border: 10px solid black;} -> render box 350px wide, the width of content is 330px = 350 - (2 * 10px)