(Intermediate HTML & CSS) Positioning Knowledge Assessment Guide 2024, Exams of Computer Science

Download (Intermediate HTML & CSS) Positioning Knowledge Assessment Guide 2024 and more Exams Computer Science in PDF only on Docsity!

INTERMEDIATE HTML & CSS

Positioning

KNOWLEDGE ASSESSMENT GUIDE

1. Which CSS property is used to specify the stacking order of positioned elements?
   • a) position
   • b) z-index
   • c) display
   • d) float
   • Answer: b) z-index
   • Rationale: The z-index property specifies the stack order of an element. Elements with a higher z-index are in front of those with a lower z-index.
2. What value of the position property will remove an element from the normal document flow and position it relative to its nearest positioned ancestor?
   • a) static
   • b) relative
   • c) absolute
   • d) fixed
   • Answer: c) absolute
   • Rationale: The absolute value positions the element relative to its nearest positioned ancestor, removing it from the normal document flow.
3. Which of the following is NOT a valid value for the position property?

• Answer: b) visibility
• Rationale: The visibility property can hide an element without affecting the layout, unlike display: none; which removes the element from the document flow.

Fill-in-the-Blank Questions

6. The __________ property in CSS is used to position an element relative to its normal position.

• Answer: relative
• Rationale: The relative value of the position property allows an element to be positioned relative to its normal position.

7. An element with position: __________; will be positioned relative to the nearest ancestor with a position other than static.

• Answer: absolute
• Rationale: position: absolute; positions the element relative to the nearest positioned ancestor.

8. The __________ property is used to specify whether an element is visible or hidden.

• Answer: visibility
• Rationale: The visibility property controls the visibility of an element.

9. To create a sticky element that toggles between relative and fixed positioning, you use position: __________;.
   • Answer: sticky
   • Rationale: position: sticky; allows an element to switch between relative and fixed positioning based on the user's scroll position.
10. The __________ property is used to control the stacking order of elements.
    • Answer: z-index
    • Rationale: The z-index property determines the stack order of elements.

True/False Questions

11. The position: static; value positions an element relative to the viewport.
    • Answer: False
    • Rationale: position: static; is the default positioning and does not position the element relative to the viewport.
12. An element with position: fixed; will scroll with the page.
    • Answer: False
    • Rationale: An element with position: fixed; remains fixed relative to the viewport and does not scroll with the page.

• d) position: relative;
• Answer: b) position: sticky;
• Rationale: position: sticky; makes an element stick to the top of the viewport when scrolling.

17. What is the default value of the position property?

• a) static
• b) relative
• c) absolute
• d) fixed
• Answer: a) static
• Rationale: The default value of the position property is static.

18. Which property would you use to hide an element but still keep it in the document flow?

• a) display: none;
• b) visibility: hidden;
• c) opacity: 0;
• d) overflow: hidden;
• Answer: b) visibility: hidden;
• Rationale: visibility: hidden; hides the element but keeps it in the document flow.

19. An element with position: absolute; and top: 0; left: 0; will be positioned at the:
    • a) Top-left corner of the viewport
    • b) Top-left corner of the nearest positioned ancestor
    • c) Top-left corner of the document
    • d) Top-left corner of the parent element
    • Answer: b) Top-left corner of the nearest positioned ancestor
    • Rationale: position: absolute; positions the element relative to the nearest positioned ancestor.
20. Which of the following properties can be used to create a sticky footer that stays at the bottom of the viewport?
    • a) position: fixed;
    • b) position: sticky;
    • c) position: absolute;
    • d) position: relative;
    • Answer: a) position: fixed;
    • Rationale: position: fixed; can be used to create a sticky footer that stays at the bottom of the viewport. Multiple Choice: Which CSS property is used to specify the type of positioning method for an element?

C) absolute D) fixed

Correct Answer: B) static

Rationale: The static value positions an element based on its normal position in the document flow without any special positioning. Fill-in-the-Blank: The CSS property top, right, bottom, and left are used to specify the __ of positioned elements.

Correct Answer: offset

Rationale: These properties are used to adjust the position of elements relative to their initial position. True/False: The float property is used for positioning an element to the right or left within its parent container.

Correct Answer: True

Rationale: The float property is commonly used for positioning elements to the right or left within their containing element. Multiple Choice: Which CSS value is used to remove an element from the normal document flow and position it relative to its containing block? A) absolute B) static C) relative D) sticky

Correct Answer: C) relative

Rationale: The relative value positions an element relative to its normal position in the document flow. Fill-in-the-Blank: The CSS property position: __; positions an element relative to the viewport.

Correct Answer: fixed

Rationale: Elements with position: fixed; are positioned relative to the viewport and do not move when the page is scrolled. True/False: The position: sticky; property is used to position an element relative to its normal position in the document flow.

Correct Answer: True

Rationale: Elements with position: sticky; behave like position: relative; until they reach a specified scroll position. Multiple Choice: Which CSS property is used to clear the floated elements on both sides of an element? A) float B) display C) clear D) position

Correct Answer: C) clear

Rationale: The clear property is used to specify whether an element can be next to or must be moved below the floated elements.

Correct Answer: clipping

Rationale: clip-path allows you to clip a region of an element to create complex shapes. True/False: An element with position: absolute; is positioned relative to its initial containing block.

Correct Answer: False

Rationale: Elements with position: absolute; are positioned relative to their closest positioned ancestor. Multiple Choice: Which CSS property is used to specify the stacking order of elements with the same z-index value? A) order B) stacking-order C) z-order D) z-index

Correct Answer: A) z-index

Rationale: The z-index property specifies the stacking order of positioned elements, overriding the default stacking order. Fill-in-the-Blank: The CSS property transform: __; is used to scale, rotate, skew, or translate an element.

Correct Answer: translate

Rationale: The transform property in CSS allows for various transformations like scaling, rotating, skewing, and translating elements.

True/False: The position: sticky; property is supported in all major browsers without any compatibility issues.

Correct Answer: False

Rationale: The position: sticky; property may have compatibility issues in some older browsers, so it should be used carefully. Multiple Choice: Which CSS value is used to position an element relative to its normal position in the document flow? A) absolute B) static C) relative D) fixed

Correct Answer: C) relative

Rationale: The relative value positions an element relative to its normal position in the document flow. Fill-in-the-Blank: The CSS property flex is commonly used for creating flexible and __ layouts.

Correct Answer: responsive

Rationale: The flex property in CSS is used to create flexible and responsive layouts using flexbox.

1. Multiple Choice: Which of the following terms describes the process of determining the position of an element on a web page?

B) position C) display D) float

Correct Answer: A) z-index

Rationale: The z-index property is used to control the stacking order of positioned elements.

5. Fill in the Blank: The CSS property _________ allows you to position an element where it would normally appear in the document flow, but then offset it in any direction.

Correct Answer: offset

Rationale: The CSS property that allows this is the "transform" property.

6. True/False: Elements with a fixed position will scroll with the rest of the content on a web page.

Correct Answer: False

Rationale: Elements with a fixed position will not scroll with the rest of the content and will remain fixed in their position.

7. Multiple Choice: Which positioning value places an element in the normal flow of the document and shifts surrounding content to make space for it? A) Relative B) Absolute

C) Fixed D) Static

Correct Answer: A) Relative

Rationale: Relative positioning shifts the element from its normal position, but the space it would have occupied is still reserved in the document flow.

8. Fill in the Blank: The CSS property _________ can be used to restrict the viewport area that a fixed-position element is visible within.

Correct Answer: clip

Rationale: The "clip" property allows you to define a rectangular region that clips an absolutely positioned element.

9. True/False: Sticky positioning is a hybrid between relative and fixed positioning.

Correct Answer: True

Rationale: Sticky positioning is a hybrid between relative and fixed positioning. The element is treated as relatively positioned until it reaches a specified scroll point.

10. Multiple Choice: Which CSS property is used to move an element in relation to its normal position without affecting the layout around it? A) Translate B) Position C) Flex

Correct Answer: D) Static

Rationale: Elements with static positioning are positioned according to the normal document flow.

14. Fill in the Blank: The CSS property _________ is used to place an element behind other elements on a web page.

Correct Answer: z-index

Rationale: The "z-index" property in CSS controls the stacking order of positioned elements.

15. True/False: Using the "position: sticky;" property will cause an element to remain fixed during scrolling until a certain point is reached on the page.

Correct Answer: True

Rationale: The "position: sticky;" property keeps the element in the normal flow until a specified scroll point is reached.

16. Multiple Choice: Which positioning value removes the element from the normal flow and positions it relative to the viewport? A) Fixed B) Relative C) Static D) Absolute

Correct Answer: A) Fixed

Rationale: Fixed positioning removes the element from the normal flow and positions it relative to the viewport.

17. Fill in the Blank: The CSS property _________ is used to define the position of an element using left, top, right, and bottom values.

Correct Answer: position

Rationale: The "position" property defines the type of positioning method used for an element.

18. True/False: Elements with fixed positioning scroll with the rest of the content on a web page.

Correct Answer: False

Rationale: Elements with fixed positioning do not scroll with the rest of the content and remain fixed on the viewport.

19. Multiple Choice: Which CSS property is used to position an element at a fixed position within the viewport, meaning it stays in the same place when the page is scrolled? A) Position B) Fixed C) Translate D) Absolute

Correct Answer: B) Fixed