HTML/CSS

Position

When using position property in CSS, we can put elements anywhere regardless of html code. There are 4 values in position, which are static, relative, absolute, fixed, but static is barely used.

relative

The element is positioned relative to its normal position.
Basically nothing happens unless you add any other positioning attributes (top, bottom, right, left).

#first_element {
       position: relative;
       left: 30px;
       top: 70px;
}

The first element will be placed 70px down from the top and 30px right from the left side.

absolute

The element is positioned absolutely to its first positioned parent.
This allows you to place your element on the exact location where you want it on the browser. It is done relatively to the first relatively positioned parent element. If there is no parent element, it will be positioned directly to the HTML element.

#parent {
       position: relative;
}
#child {
       position: absolute;
       right: 40px;
       top: 100px;
}

The child element moves relatiave to the top of the parent element by 100px and right of the parent element by 40px.

fixed

It always stays in the same place even if the page is scrolled. Top, right, bottom, and left properties are used.

#fixed_element {
       position: fixed;
       bottom: 0;
       right: 0;
}

Layout

inline vs. inline-block vs. block

• The major difference from display: inline is that display: inline-block allows to set a width and height on the element.
• With display: inline-block, the top and bottom margins and paddings are respected, but with display: inline, they are not.
• Compared to display: block, display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
• A common use for display: inline-block is to display list items horizontally.

span.a {
      display: inline;
      width: 100px;
      height: 100px;
      padding: 5px;
}
span.b {
      display: inline-block;
      width: 100px;
      height: 100px;
      padding: 5px;
}
span.c {
      display: block;
      width: 100px;
      height: 100px;
      padding: 5px;
}

Float

It is used for positioning and formatting.

• left: the element floats to the left
• right: the element floats to the right
• none: the element does not float
• inherit: the element inherits the float value of its parent

img {
      float: right;
}