Fixed Positioning

Question 1

What is a positioned element?

Answer 1

A positioned element is one that have had its position property changed from its default values.

Question 2

What is positioning?

Answer 2

Positioning governs how elements are laid on a page and how the position adjusting properties of top, right, bottom and left affect elements.

Question 3

Give the values of the CSS position property.

Answer 3

1. Static ( The default)
2. Fixed
3. Absolute
4. Relative

Question 4

What position properties does flexbox reduce the use case of?

Answer 4

Absolute and relative.

Question 5

Give four points explaining static elements.

Answer 5

1. It is the default for all elements.
2. It means that elements follow the “flowing text” model of layout.
3. It totally ignores the position adjusting properties of top, right, bottom and left.
4. The only properties that influence it are margins, paddings, floats, and display properties such as block, inline, inline-block, etc

Question 6

Give all the characteristics you know of fixed elements.

Answer 6

1. Fixed elements totally respect the position adjusting qualities of top, right, bottom and left.
2. Fixed elements stick to the top, bottom, or side of the page and will not scroll with the rest of the page.
3. Fixed elements do not contribute to the size of their parent.
4. Unlike static and relative positioned block level elements which take the width of their parent container, fixed and absolute block elements do not and in fact, the initial width of a fixed element is its content area although that can be changed.
5. Unlike static and relative block elements where margins can be used to adjust an element and keep neighboring siblings away, fixed and absolute elements cannot use the margin property to keep neighboring siblings away to fight crowding.
6. Fixed and absolute elements can use the position adjusting properties of top, right, bottom and left to size an element and leave the dimensional properties of width and height unchanged and the fixed positioned (or absolute positioned) element will grow or shrink based on the size of the window.
   NOTE: This feature is only available to fixed and absolute positioned elements.

Question 7

What is fixed positioning?

Answer 7

Fixed positioning places an element in a location that is relative to the browser window (rather than the page) hence fixed elements never move!

Question 8

What is a fixed positioned element?

Answer 8

A fixed positioned element is an element that has been placed against the viewport and will not scroll with the rest of the page.