Survey site focus on HTML flow

Survey focus on css flow

• The default style for position is position: static and offset properties (top, bottom will not work)

• Position: Relative means relative to its default static position on the web page.
  

.box-bottom {
  background-color: DeepSkyBlue;
  position: relative;
  // offset properties top, left
  top: 20px;
  left: 50px;
}

• position: fixed will remove its element out of HTML flow. Therefore, it covers element following.

To fix, add position: relative, provide offset amount to the element that is currently covered by the position: fixed element.

nav {
  // nav element is removed from HTML flow
  position: fixed
}

// element following `nav` is body
body {
  // take the element out of html flow 
  position: relative;
  // offset
  top: 200px;
}

• When use display property: inline-block, element can be placed next to each other and have dimension. image element is good example of inline-block.

  <header>
    <ul>
      <li>Question 1</li>
      <li>Question 2</li>
      <li>Question 3</li>
      <li>Question 4</li>
      <li>Question 5</li>
    </ul>
  </header>

We then can set li to display: inline-block; to questions to show up side by side.