TIL8 - CSS - Display & Positioning

1. Display

The display property sets the flow of the element horizontally or vertically in the HTML document

• inline: elements will be diplayed horizontally, side by side "in line". No line breaks before and after the element
  > width & height cannot be manually set for inline elements
  > ex) <em>, <strong>, <span>
• block : elements will be displayed vertically, one under the other, in its own "block"
• inline-block: combines inline and block. elements will be displayed horizontally, side by side, but the width & height can be specified, with its own "block"

2. Positioning

The position property sets the positioning of an element

• relative: sets the position of an element relative to its original position (use offset properties to specify the relative position)
• absolute: sets the position of an element relative to its closest parent element that has a designated position property. For example, you can set an element(A)'s position to absolute and its parent container element(B)'s to relative so that you can more conveniently adjust A's position inside B
• fixed sets the position of an element to be fixed and is removed from the flow of the page, making it always visible (i.e. a fixed navbar)

• After you have set the position property to either relative, absolute, or fixed, you can set the offset (top, right, bottom, left) properties to adjust the element's position from the 4 sides

• The z-index property is used to specify the level of visibility of an element relative to other elements on the webpage, in case of an overlap.
  > element with a higher z-index will be brought forward
  > ex) an element with z-index: 10 will be moved forward in front of an element with z-index: 1
  > you can set the z-index of the navbar element with position: fixed to be higher than other elements, so that the navbar will always come forward

Float

The float property is used to position the element to the far left or far right on the webpage

Often, float may not work as expected.

• For example, when you have the following HTML and CSS:

<div class="before">I come before!</div>
<section class="after">I come after!</section>

.before {
  float: left;
  width: 100px;
  height: 100px;
  margin: 10px;
}

the <div> and <section> elements will appear to overlap, with the <section> appearing to be before the <div> element due to <div>'s margin property.

In this case, you can use the clear property to "clear" the element's left or right side:

.before {
  float: left;
  width: 100px;
  height: 100px;
  margin: 10px;
}

.after {
  clear: left;
}

• Also, when you have the following nested element:

<div class="container">
I'm the parent!
  <p class="child">I'm the child!</p>
</div>

.container {
  width: 100px;
  height: 100px;
}

.child {
  height: 200px;
  float: left;
}

the <p> element is nested inside the <div> element, and since the <p> is bigger than the <div>, it will overflow - go over the dimensions of the <div> element.

In this case, you can set a property to the parent element overflow: auto or overflow: hidden:

.container {
  width: 100px;
  height: 100px;
  overflow: auto;
}

.child {
  height: 200px;
  float: left;
}

overflow: auto will allow for scrolling within the <div> element, while overflow: hidden will cut off the <p> element to fit inside the <div> element