feat(curriculum): add set 2 of questions for CSS Positioning quiz (#61058)

2026-05-28 18:26:54 +00:00 · 2025-07-13 21:21:09 +01:00
parent 5e1990ee1c
commit e1bcb668b4
1 changed files with 593 additions and 0 deletions
@@ -628,3 +628,596 @@ Which of the following is the default value of the `position` property?

 `static`

+## --quiz--
+
+### --question--
+
+#### --text--
+
+Which `position` value lets you adjust an element's position with `top` and `left` while keeping it within the normal document flow?
+
+#### --distractors--
+
+`position: absolute;`
+
+---
+
+`position: static;`
+
+---
+
+`position: fixed;`
+
+#### --answer--
+
+`position: relative;`
+
+### --question--
+
+#### --text--
+
+How does an element with `position: sticky;` initially behave?
+
+#### --distractors--
+
+It behaves like a `fixed` element until a scroll position is reached.
+
+---
+
+It is always removed from the normal document flow.
+
+---
+
+It behaves like an `absolute` element within its parent.
+
+#### --answer--
+
+It behaves like a `relative` element until a specified scroll position is met.
+
+### --question--
+
+#### --text--
+
+Which of the following demonstrates a valid and effective use of the `z-index` property to make `.box-two` appear on top of `.box-one`?
+
+#### --distractors--
+
+```css
+.box-one {
+  position: static;
+  z-index: 2;
+}
+.box-two {
+  position: static;
+  z-index: 1;
+}
+```
+
+---
+
+```css
+.box-one {
+  position: absolute;
+  stack-order: 1;
+}
+.box-two {
+  position: absolute;
+  stack-order: 2;
+}
+```
+
+---
+
+```css
+.box-one {
+  float: left;
+  z-index: 1;
+}
+.box-two {
+  float: left;
+  z-index: 2;
+}
+```
+
+#### --answer--
+
+```css
+.box-one {
+  position: absolute;
+  z-index: 1;
+}
+.box-two {
+  position: absolute;
+  z-index: 2;
+}
+```
+
+### --question--
+
+#### --text--
+
+What is the `z-index` property used for in CSS?
+
+#### --distractors--
+
+It sets the zoom level of the page.
+
+---
+
+It controls the horizontal alignment of elements within a flex container.
+
+---
+
+It defines the spacing between an element's content and its border.
+
+#### --answer--
+
+It controls the vertical stacking order of positioned elements that overlap.
+
+### --question--
+
+#### --text--
+
+When you apply `top: 10%;` to an element with `position: fixed;`, what is the `10%` calculated in relation to?
+
+#### --distractors--
+
+The height of the element itself.
+
+---
+
+The height of its parent container.
+
+---
+
+The width of the viewport.
+
+#### --answer--
+
+The height of the viewport.
+
+### --question--
+
+#### --text--
+
+Which of the code examples is a correct use of the `z-index` property to place an overlay above other content?
+
+#### --distractors--
+
+```css
+.overlay {
+  z-index: 5;
+  background-color: black;
+}
+```
+
+---
+
+```css
+.overlay {
+  display: block;
+  z-layer: 1;
+  background-color: black;
+}
+```
+
+---
+
+```css
+.overlay {
+  float: left;
+  z-index: 2;
+  background-color: black;
+}
+```
+
+#### --answer--
+
+```css
+.overlay {
+  position: absolute;
+  z-index: 10;
+  background-color: black;
+}
+```
+
+### --question--
+
+#### --text--
+
+Which CSS property is used to control whether an element should be moved below floated elements?
+
+#### --distractors--
+
+`float`
+
+---
+
+`overflow`
+
+---
+
+`display`
+
+#### --answer--
+
+`clear`
+
+### --question--
+
+#### --text--
+
+How will an element with `position: relative;` and `bottom: 25px;` be moved?
+
+#### --distractors--
+
+It will move 25px down from its normal position.
+
+---
+
+It will move 25px to the right of its normal position.
+
+---
+
+It will be positioned 25px from the bottom of the viewport.
+
+#### --answer--
+
+It will move 25px up from its normal position.
+
+### --question--
+
+#### --text--
+
+The `z-index` property will only affect elements that have what CSS property applied?
+
+#### --distractors--
+
+A `float` value other than `none`.
+
+---
+
+A `display` value of `inline-block`.
+
+---
+
+A `background-color` set.
+
+#### --answer--
+
+A `position` value other than `static`.
+
+### --question--
+
+#### --text--
+
+What would be the effect of applying `float: right;` to a logo in a header?
+
+#### --distractors--
+
+The logo would be aligned to the right, but would remain in the normal document flow, preventing other content from wrapping.
+
+---
+
+The logo would be taken out of the flow and positioned on the right side of the entire browser viewport, not its container.
+
+---
+
+The logo would become a block-level element that takes up the full width of the header, pushing other elements below it.
+
+#### --answer--
+
+The logo would be removed from its normal flow and placed on the right side of its container, with other content wrapping around it.
+
+### --question--
+
+#### --text--
+
+Which CSS snippet will keep an element fixed to the top of the viewport once it is scrolled to?
+
+#### --distractors--
+
+```css
+.header {
+  position: fixed;
+  top: 0;
+}
+```
+
+---
+
+```css
+.header {
+  position: relative;
+  top: 0;
+}
+```
+
+---
+
+```css
+.header {
+  position: absolute;
+  top: 0;
+}
+```
+
+#### --answer--
+
+```css
+.header {
+  position: sticky;
+  top: 0;
+}
+```
+
+### --question--
+
+#### --text--
+
+What is the specific purpose of `clear: both;` in CSS?
+
+#### --distractors--
+
+It cancels out the `float` property on the element itself, returning it to the normal document flow.
+
+---
+
+It removes any `clear` properties that were inherited from a parent element, restoring the default floating behavior.
+
+---
+
+It only clears floated elements that are on the right side, allowing left-floated elements to remain as they are.
+
+#### --answer--
+
+It ensures the element is moved below any floated elements that appear before it on both the left and right sides.
+
+### --question--
+
+#### --text--
+
+Given the following code, how will `.child` be positioned?
+
+```css
+.parent {
+  /* No position property set */
+  height: 200px;
+}
+.child {
+  position: absolute;
+  top: 10px;
+}
+```
+
+#### --distractors--
+
+It will be positioned 10px from the top of the `.parent` element, as `absolute` positioning is always relative to the direct parent.
+
+---
+
+It will remain in its default static position because the `absolute` value is invalid without a `z-index` property.
+
+---
+
+It will be positioned 10px from the top of the browser window, remaining fixed in place even when the user scrolls the page.
+
+#### --answer--
+
+It will be positioned 10px from the top of the initial containing block, such as the `<body>`, because its parent is not positioned.
+
+### --question--
+
+#### --text--
+
+What effect will the following CSS have on the `.box` element?
+
+```css
+.box {
+  position: absolute;
+  top: 50px;
+  left: 50px;
+}
+```
+
+#### --distractors--
+
+The element will remain in its normal flow but will be indented by 50px from the top and left, pushing other elements away.
+
+---
+
+The element will be fixed to the viewport and will stay 50px from the top and 50px from the left, even when the page is scrolled.
+
+---
+
+The element will be positioned relative to its own starting point, moving 50px down and 50px to the right without leaving the document flow.
+
+#### --answer--
+
+The element will be taken out of the normal flow and placed 50px from the top and 50px from the left of its nearest positioned ancestor.
+
+### --question--
+
+#### --text--
+
+Which of the following `position` values removes an element entirely from the document's normal flow?
+
+#### --distractors--
+
+`position: static;`
+
+---
+
+`position: relative;`
+
+---
+
+`position: inherit;`
+
+#### --answer--
+
+`position: absolute;`
+
+### --question--
+
+#### --text--
+
+Given a `.parent` and a `.child` element, which CSS snippet will correctly position the `.child` 20px from the top left corner of the `.parent` element?
+
+#### --distractors--
+
+```css
+.parent {
+  /* position: static; by default */
+}
+.child {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+}
+```
+
+---
+
+```css
+.parent {
+  position: relative;
+}
+.child {
+  position: relative;
+  top: 20px;
+  left: 20px;
+}
+```
+
+---
+
+```css
+.parent {
+  position: relative;
+}
+.child {
+  float: left;
+  top: 20px;
+  left: 20px;
+}
+```
+
+#### --answer--
+
+```css
+.parent {
+  position: relative;
+}
+.child {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+}
+```
+
+### --question--
+
+#### --text--
+
+What is the difference between `static` and `relative` positioning?
+
+#### --distractors--
+
+`static` positioning removes an element from the document flow, while `relative` positioning keeps it in the flow.
+
+---
+
+An element with `position: static;` can be offset with the `top` and `left` properties, while `position: relative;` cannot.
+
+---
+
+`static` positioning is for block-level elements, while `relative` positioning is only intended for inline elements.
+
+#### --answer--
+
+Both keep an element in the normal document flow, but `relative` allows the element to be offset from its original position.
+
+### --question--
+
+#### --text--
+
+Which CSS snippet correctly floats an image to the left, allowing other content to wrap around it?
+
+#### --distractors--
+
+```css
+.image {
+  position: absolute;
+  left: 0;
+}
+```
+
+---
+
+```css
+.image {
+  display: inline-block;
+}
+```
+
+---
+
+```css
+.image {
+  text-align: left;
+}
+```
+
+#### --answer--
+
+```css
+.image {
+  float: left;
+}
+```
+
+### --question--
+
+#### --text--
+
+What is the difference between `absolute` and `fixed` positioning?
+
+#### --distractors--
+
+`absolute` positioning is relative to the viewport, while `fixed` positioning is relative to the nearest positioned ancestor.
+
+---
+
+`absolute` positioning keeps the element in the normal document flow, while `fixed` positioning removes it from the flow.
+
+---
+
+Both are positioned relative to the viewport, but `fixed` elements will scroll with the page while `absolute` elements will not.
+
+#### --answer--
+
+`absolute` positioning is relative to the nearest positioned ancestor, while `fixed` positioning is relative to the browser viewport.
+
+### --question--
+
+#### --text--
+
+Which `position` value places an element in the normal document flow and prevents offset properties like `top` and `left` from having any effect?
+
+#### --distractors--
+
+`position: relative;`
+
+---
+
+`position: absolute;`
+
+---
+
+`position: fixed;`
+
+#### --answer--
+
+`position: static;`
+