[TIL] CSS Position & Display Properties

김보현·2020년 9월 16일
0

Display Properties

A web page is made up of building blocks or boxes. The display property not only determines how these boxes are positioned in relation to each other, but also the overall CSS basic box model.

Inline

Inline elements do not start on a new line and take up as much width as its content requires. Examples include span, input, button, etc.

Height and width cannot be applied to inline elements. Inline elements do, however, respect left/right margin and padding values.

Block

Block elements always start on a new line and take up the full row or width available (across the entire web page). Examples include container elements like div, li, section; and text elements like p and h1.

Height, width, padding, and margin values can be applied to inline elements. They will acquire full-width if width values are not defined.

Inline-block

Inline-block elements are inline elements that emulate block elements. Simply put, this property allows other elements to sit to their left and right, while respecting height, width, margin, and padding values.

While every element has an inherent display property, they can be changed to inline-block to serve a different purpose.

Examples include:

  1. Distinguishing buttons

    Buttons are inherently inline and so when margin and padding values are applied, buttons break out of the container. The inline-block property prevents this from happening.

  2. Making lists go horizontal

    Lists are blocks and laid out vertically by default, so changing the display to inline-block is useful when changing the orientation of the list.

  3. Centering lists

    When text-align: center is applied to a list, the text inside the list can be centered, but the list item itself is still full-width, aligning the bullets to the left. By applying inline-bllock to the whole list, the list becomes only as wide as the natural width of the content. Then, these inline-block elements can be centered by setting margin-left and margin-right to auto (margin: 0 auto;).

Position Properties

All elements in a web page are static by default, meaning they will adhere to the normal page flow. By changing position properties, the elements position and flow can be altered.

Relative

The relative property positions the element relative to itself. When offset values (top, left, bottom, or right) are applied, relative elements shift as specified from its “normal” position

Things to consider:

  1. Any element with the relative property will inherently appear on top of any other static elements, but this behavior can be overwritten by setting a higher z-index value on the static element
  2. Any child of the relative parent can be absolutely positioned. This will be further discussed in the next section.

Absolute

The absolute property positions the element relative to the nearest positioned parent. Unlike relative positioning, absolute positioning removes elements from the existing flow because elements are only dependent on its “positioned parent.” A “positioned parent” refers to an element whose position is set as anything except static.

If the absolute child is not contained by a “positioned parent,” it takes on the position of the < html > element itself (and will be positioned relative to the page itself).

Fixed

The fixed position property positions the element relative to the viewport or document. Like absolute, fixed positioning removes the element from the existing flow and do not affect other elements.

Fixed positioning is readily used for elements like navigation bars, which should remain visible at all times regardless of the page scroll.

profile
프론트엔드 개발 꿈나무 🤓

0개의 댓글