positioning

Question 1

what are the positioning options?

Answer 1

absolute, relative, static (default), fixed, sticky

Question 2

What does adding “position: static” to an element accomplish?

Answer 2

Elements are positioned static by default. Position static does nothing but simply allow an element to sit in the normal flow of the page. It is not affected by top, left, bottom, and right properties.

Question 3

What does adding “position: relative” to an element accomplish.

Answer 3

A relative positioned element can be positioned relative to where it would have normally appeared in the document. This means that if it has parent elements, the positioning of this element will occur relative to where the parent elements caused this element to be positioned. e.g. if the parent element has a padding of 10px and you add a property of “left: 10px” to the relative positioned child element, the element will get placed 10px from the left of the 10px padding i.e. 20px from the left border of the parent element.

Notes:
Relative-positioned elements can overlap sibling elements within a container.

Question 4

What does adding “position: absolute” to an element accomplish?

Answer 4

Absolute positioned elements are positioned relative to it’s first positioned ancestor i.e. the ancestor that is not positioned as static. This may seem similar to relative positioning however the key difference is that it’s positioned relative to the positioned ancestor and not itself. This means that properties that would affect a relative positioned element (e.g. padding) won’t affect an absolute positioned element.

Gotchas:
- absolute positioning can be hard to maintain in the world of responsive screens. If static values are set on an absolute positioned element, the scaling of the positioned ancestor can lead to unintended and unexpected positioning of the absolute positioned element. If absolute positioning is needed for a responsive layout take care to use relative units for the positioning attributes (e.g. %, rem, etc)

Question 5

What does adding “position: fixed” to an element accomplish?

Answer 5

This means an element is positioned relative to the viewport. This can be useful if a user wants a component to stay “fixed” to the screen as a user scrolls down the page.

Question 6

What does adding “position: sticky” to an element accomplish?

Answer 6

A sticky-positioned element is positioned depending on the scroll position. It will be positioned relative until the scroll reaches a certain position and then it will be positioned as fixed.