css-positioning

Question 1

What is the default value for the position property of HTML elements?

Answer 1

The default value for the position property of HTML elements is static. This is what creates “normal” document flow.

Question 2

How does setting position: relative on an element affect document flow?

Answer 2

Setting position:relative on an element has no affect on the document flow and only on the appearance of the elements position on the page.

Question 3

How does setting position: relative on an element affect where it appears on the page?

Answer 3

Setting position: relative on an element does not affect where it appears on the page. Adding offset elements such as: top, bottom, left, right will change the position of the element on the page without taking it out of document flow.

Question 4

How does setting position: absolute on an element affect document flow?

Answer 4

Setting position: absolute on an element takes the element out of the document flow. The position is now relative to the nearest non-statically positioned parent. One trick is setting the parent display to relative to make the absolute position offset elements target the parent element.

Question 5

How does setting position: absolute on an element affect where it appears on the page?

Answer 5

Setting position: absolute on an element makes it appear on top of the page and other elements will sit underneath it and might be covered by the absolute element.

Question 6

How do you constrain an absolutely positioned element to a containing block?

Answer 6

To constrain an absolutely positioned element you want to make the parent display a non-static display. This is typically done by making the parent display: relative.

Question 7

What are the four box offset properties?

Answer 7

The four box offset properties are; top, right, bottom, left.