[Week 5] CSS Positioning & Flexbox Proficiency Test

What does `position: static` do?

• Positions the element relative to its normal position

• Positions the element relative to the viewport

• Removes the element from the document flow

• Allows overlapping of elements

Answer explanation

The correct choice, 'Positions the element relative to its normal position', accurately describes 'position: static'. This value keeps the element in the normal document flow, meaning it will appear where it would normally be placed.

Which positioning method allows an element to stay in place while scrolling?

• static

• relative

• absolute

• fixed

Answer explanation

The 'fixed' positioning method allows an element to remain in a fixed position relative to the viewport, meaning it stays in place while the page is scrolled. This is unlike 'static', 'relative', or 'absolute' positioning.

What is the effect of `position: relative`?

• The element is positioned relative to its original position

• The element is removed from the document flow

• The element takes the position of the viewport

• The element is fixed in the viewport

Answer explanation

The correct choice is that 'position: relative' positions the element relative to its original position in the document flow, allowing for adjustments without removing it from the flow.

Which property is used to specify an element's position when using `position: absolute`?

• top

• left

• both A and B

• none of the above

Answer explanation

When using `position: absolute`, the properties `top` and `left` are used to specify the element's position relative to its nearest positioned ancestor. Therefore, the correct answer is both A and B.

What happens when an element with `position: fixed` is scrolled?

• It moves with the scroll

• It stays fixed in the viewport

• It becomes relative

• It disappears

Answer explanation

An element with `position: fixed` remains in a fixed position relative to the viewport, meaning it does not move when the page is scrolled. This is why the correct answer is that it stays fixed in the viewport.

What does `position: sticky` do?

• Combines features of fixed and relative positioning

• Keeps the element static

• Positions the element absolutely

• Makes the element disappear on scroll

Answer explanation

`position: sticky` combines features of fixed and relative positioning, allowing an element to stick to a defined position within its container when scrolling, rather than being static or absolutely positioned.

Which of the following is true for `position: absolute`?

• It is positioned relative to the nearest positioned ancestor

• It is positioned relative to the viewport

• It always takes up space in the document flow

• None of the above

Answer explanation

The correct choice is that `position: absolute` is positioned relative to the nearest positioned ancestor. This means it will look for the closest parent element with a position other than static.

If an element is positioned `absolute`, which parent element will it respect?

• The body element

• The nearest ancestor with a position other than static

• The viewport

• None of the above

Answer explanation

An element with `absolute` positioning will be positioned relative to the nearest ancestor that has a position property other than `static`. This is why the correct answer is 'The nearest ancestor with a position other than static'.

What is the default value of the `position` property?

• fixed

• absolute

• relative

• static

Answer explanation

The default value of the `position` property in CSS is `static`. This means that elements are positioned according to the normal flow of the document, without any special positioning applied.

Which positioning method can overlap other elements?

• static

• relative

• absolute

• sticky

Answer explanation

The 'absolute' positioning method allows elements to be positioned relative to their nearest positioned ancestor, which can cause them to overlap other elements. In contrast, 'static', 'relative', and 'sticky' do not allow for such overlap.