MCQs Of Class 26: CSS Z-Index and Stacking Context
1. What does the z-index property in CSS control?
a) The size of an element
b) The visibility of an element
c) The stacking order of elements
d) The color of an element
Answer: c) The stacking order of elements
Explanation: z-index controls the stacking order of elements along the z-axis (the third dimension).
2. What happens if two elements have the same z-index value?
a) The one listed later in the HTML will appear on top
b) The one listed earlier in the HTML will appear on top
c) They will overlap randomly
d) One will disappear
Answer: b) The one listed earlier in the HTML will appear on top
Explanation: If two elements have the same z-index, the one that appears later in the HTML source code will be stacked above the one appearing earlier.
3. Which CSS property is used to control stacking order?
a) position
b) display
c) z-index
d) margin
Answer: c) z-index
Explanation: z-index determines the stacking order of positioned elements (those with position: relative, position: absolute, or position: fixed).
4. What value does the z-index property default to for elements without a specified z-index?
a) 0
b) 1
c) auto
d) undefined
Answer: c) auto
Explanation: If no z-index is specified, it defaults to auto, which means the stacking order is determined by the order in the document.
5. How does the z-index property affect elements that do not have a position property?
a) It has no effect
b) It automatically sets the position to relative
c) It makes the element appear on top
d) It forces the element to be displayed in a new stacking context
Answer: a) It has no effect
Explanation: z-index only works on positioned elements (those with position: relative, absolute, or fixed).
6. What creates a new stacking context?
a) A div element
b) A position: absolute element
c) An element with z-index value greater than 0
d) A position: relative element
Answer: c) An element with z-index value greater than 0
Explanation: A new stacking context is created when an element's z-index is set to a value other than auto and it is a positioned element.
7. Which of the following elements creates a new stacking context?
a) An element with position: relative and z-index: -1
b) An element with position: absolute and z-index: auto
c) An element with position: fixed and z-index: 1
d) An element with position: static
Answer: c) An element with position: fixed and z-index: 1
Explanation: Elements with certain positioning properties and a z-index other than auto create a new stacking context.
8. How do stacking contexts work with child elements?
a) Child elements cannot have a z-index
b) Child elements' z-index values are relative to their parent stacking context
c) Child elements are stacked independently of their parent
d) Only parent elements can have a z-index
Answer: b) Child elements' z-index values are relative to their parent stacking context
Explanation: A child element's z-index is relative to the parent stacking context, meaning it is influenced by the stacking context of its parent element.
9. Which of the following values of position will allow the z-index property to work?
a) static
b) relative
c) block
d) inline
Answer: b) relative
Explanation: z-index works with position: relative, position: absolute, position: fixed, or position: sticky. It does not work with position: static.
10. What does a z-index value of 1 indicate?
a) The element is placed in the bottom of the stack
b) The element is placed at the top of the stack
c) The element will be displayed with the default stacking order
d) The element will be hidden
Answer: b) The element is placed at the top of the stack
Explanation: A higher z-index value means the element will be stacked above elements with a lower z-index.
11. Which CSS property can be used to fix an element to a particular location on the screen?
a) position
b) z-index
c) padding
d) border
Answer: a) position
Explanation: The position property (e.g., fixed, absolute, relative) controls how an element is positioned on the screen, which affects how z-index works.
12. When does the stacking context for an element get reset?
a) When the parent element is scrolled
b) When the element's position changes
c) When the parent element has a z-index applied
d) When the element is hidden using display: none
Answer: c) When the parent element has a z-index applied
Explanation: A new stacking context is formed when a z-index is applied to an element, and the child elements are placed relative to this stacking context.
13. What does the auto value for z-index do?
a) It ignores the stacking context
b) It places the element at the bottom of the stack
c) It places the element in the default stacking order based on its position in the document
d) It sets the element's z-index to 1
Answer: c) It places the element in the default stacking order based on its position in the document
Explanation: The auto value allows the browser to automatically determine the stacking order based on the document structure.
14. Which of the following elements cannot have a z-index applied to it?
a) A div element with position: relative
b) A span element with position: absolute
c) A footer element with position: static
d) A section element with position: fixed
Answer: c) A footer element with position: static
Explanation: z-index only works on elements with a positioning context, such as relative, absolute, fixed, or sticky. It does not work with position: static.
15. How can you create a layered layout using z-index?
a) By applying the same z-index value to all elements
b) By stacking elements inside a div container
c) By positioning elements with different z-index values
d) By setting the z-index to 0 for all elements
Answer: c) By positioning elements with different z-index values
Explanation: Layered layouts are created by setting different z-index values for positioned elements, controlling the order in which they are stacked.
16. If an element with z-index: 10 is placed inside an element with z-index: 5, what happens?
a) The inner element will be stacked behind the outer element
b) The inner element will be stacked above the outer element
c) The z-index values of both elements are ignored
d) The inner element will be hidden
Answer: b) The inner element will be stacked above the outer element
Explanation: The stacking context for the inner element is limited by the outer element’s z-index, but the inner element can still have a higher z-index value within its own stacking context.
17. Which property can be used to create a new stacking context within an element?
a) z-index
b) position
c) overflow
d) display
Answer: a) z-index
Explanation: A new stacking context is created when z-index is applied to a positioned element.
18. Can you control the stacking order of non-positioned elements?
a) Yes, by using z-index
b) No, only positioned elements can be stacked
c) Yes, but only with z-index: auto
d) Yes, using position: absolute
Answer: b) No, only positioned elements can be stacked
Explanation: z-index only works with positioned elements (those with position: relative, absolute, fixed, or sticky).
19. How can you stack a modal above other content on the page?
a) Set z-index on the modal and content elements
b) Use position: absolute on the modal
c) Set z-index only for the modal and ensure no z-index is set on the content
d) All of the above
Answer: d) All of the above
Explanation: To ensure the modal appears on top, you can use z-index along with position: absolute or other positioning properties for the modal.
20. What is a "stacking context"?
a) A visual layer that elements belong to
b) A parent element that controls child stacking
c) The order in which elements are listed in HTML
d) A group of elements that must be stacked with the same z-index
Answer: a) A visual layer that elements belong to
Explanation: A stacking context is an element and its descendants, which are stacked in a specific order based on their z-index.
I'll continue with the next set in the following message.
4o mini
You said:
yes
ChatGPT said:
ChatGPT
21. What happens when a child element's z-index is set within a stacking context?
a) The z-index of the child is ignored
b) The child element will be stacked according to its parent’s stacking context
c) The child element will create a new stacking context
d) The child element’s z-index will overwrite the parent’s stacking context
Answer: b) The child element will be stacked according to its parent’s stacking context
Explanation: The z-index of a child element is always relative to its parent stacking context.
22. Can a z-index of 0 ever cause an element to be hidden?
a) Yes, if the element has a display: none
b) Yes, if the element is in the background
c) No, z-index: 0 just means it is stacked with other elements having a z-index of 0
d) No, z-index: 0 always brings the element to the front
Answer: c) No, z-index: 0 just means it is stacked with other elements having a z-index of 0
Explanation: z-index: 0 ensures the element appears in the stacking context, but it is not automatically placed at the front or hidden.
23. How does the z-index value affect elements with position: static?
a) It causes the element to be fixed in place
b) It forces the element to behave like position: relative
c) It has no effect
d) It moves the element forward or backward
Answer: c) It has no effect
Explanation: z-index has no effect on elements with position: static since static positioning is the default and doesn’t create a stacking context.
24. Which CSS properties can also influence stacking context besides z-index?
a) opacity
b) transform
c) filter
d) All of the above
Answer: d) All of the above
Explanation: Properties like opacity, transform, and filter can also create new stacking contexts, along with z-index.
25. When can a new stacking context be created?
a) When an element has a position value other than static
b) When an element has a z-index value other than auto
c) When an element has opacity less than 1
d) All of the above
Answer: d) All of the above
Explanation: A new stacking context is created when an element has a position other than static, a z-index value other than auto, or properties like opacity, transform, filter, or will-change.
26. What is the stacking order when multiple elements have the same z-index value?
a) The order is determined by the order of the elements in the document
b) The browser chooses randomly
c) The elements are stacked based on their position property
d) The z-index property no longer applies
Answer: a) The order is determined by the order of the elements in the document
Explanation: When elements have the same z-index, the stacking order is based on their order in the document structure.
27. How does the z-index property interact with overflow: hidden?
a) It makes the element invisible
b) It causes the element to be clipped, preventing it from overlapping outside its container
c) It has no effect
d) It stacks the element at the back
Answer: b) It causes the element to be clipped, preventing it from overlapping outside its container
Explanation: overflow: hidden clips any part of the element that overflows its container, even if it has a higher z-index.
28. Which of the following is true about stacking order when using position: absolute?
a) The stacking order is not influenced by z-index
b) The stacking order is determined by the order in the document
c) The stacking order can be controlled with z-index
d) The stacking order is always at the front
Answer: c) The stacking order can be controlled with z-index
Explanation: For absolutely positioned elements, z-index controls the stacking order, determining whether the element is placed in front or behind other elements.
29. How do you prevent an element from creating a stacking context?
a) Use position: relative with z-index: auto
b) Use position: static
c) Set z-index: 0
d) Set z-index to a negative value
Answer: b) Use position: static
Explanation: By using position: static, an element will not create a stacking context, regardless of its z-index.
30. Which of the following properties can affect the stacking order of a fixed element?
a) z-index
b) position
c) transform
d) All of the above
Answer: d) All of the above
Explanation: A fixed element can be affected by its z-index, position, and even properties like transform, which can change its stacking context.
31. If an element with position: relative has z-index: 1, and its sibling element has z-index: 2, which element will appear on top?
a) The sibling element with z-index: 2
b) The element with z-index: 1
c) Both elements will appear stacked equally
d) Neither element will appear
Answer: a) The sibling element with z-index: 2
Explanation: The element with the higher z-index value (2) will appear on top.
32. Which of the following is true about the stacking order of elements in a new stacking context?
a) Elements within the same stacking context are stacked independently of other stacking contexts
b) Elements in a new stacking context are always stacked on top of elements outside the context
c) The new stacking context will override all other stacking contexts
d) All child elements will have a z-index value of 0
Answer: a) Elements within the same stacking context are stacked independently of other stacking contexts
Explanation: Elements within a new stacking context are stacked according to their z-index, but the stacking order of different stacking contexts is independent of each other.
33. Can z-index values be used with elements that have position: fixed?
a) Yes, z-index works with position: fixed
b) No, z-index has no effect on position: fixed
c) Only elements with position: relative can use z-index
d) z-index works only with position: absolute
Answer: a) Yes, z-index works with position: fixed
Explanation: z-index works with position: fixed, allowing fixed elements to be stacked according to the specified z-index values.
34. If an element has position: relative and z-index: 0, where will it appear in relation to other elements?
a) It will always be on top
b) It will appear at the bottom of the stack
c) It will appear in the default stacking order
d) It will be clipped
Answer: c) It will appear in the default stacking order
Explanation: An element with z-index: 0 will be placed in the default stacking order, unless other elements have higher or lower z-index values.
35. How do z-index and opacity interact with each other?
a) z-index overrides opacity
b) opacity overrides z-index
c) opacity does not affect stacking contexts, but z-index does
d) opacity less than 1 creates a new stacking context, which may affect z-index
Answer: d) opacity less than 1 creates a new stacking context, which may affect z-index
Explanation: When an element has an opacity less than 1, it creates a new stacking context, which can influence the stacking order and how z-index is applied.
36. Which element will appear above a modal in a layout?
a) An element with a lower z-index
b) An element with a higher z-index
c) Any element with position: absolute
d) An element with position: relative
Answer: b) An element with a higher z-index
Explanation: A modal is often stacked using a high z-index. If another element has a higher z-index, it will appear above the modal.
37. Can z-index be applied to elements that are not positioned?
a) Yes, but only when using position: static
b) No, z-index only works with positioned elements
c) Yes, but only with position: absolute
d) Yes, but it creates an automatic stacking context
Answer: b) No, z-index only works with positioned elements
Explanation: z-index only works with positioned elements, such as those with position: relative, absolute, fixed, or sticky.
38. Which of the following will cause a stacking context to be created?
a) An element with position: relative and z-index: 0
b) An element with position: absolute and z-index: auto
c) An element with position: fixed and opacity: 0.5
d) An element with position: static
Answer: c) An element with position: fixed and opacity: 0.5
Explanation: Both position: fixed and opacity: 0.5 create a new stacking context, which influences how the element is stacked.
39. How do you control the stacking order of multiple modals on a page?
a) By applying the same z-index to all modals
b) By setting a different z-index value for each modal
c) By positioning each modal relative to each other
d) By making one modal position: static
Answer: b) By setting a different z-index value for each modal
Explanation: To stack multiple modals, each should have a unique z-index value, placing them in the desired order.
40. What happens when an element has a z-index of -1?
a) It will be placed above all elements
b) It will be stacked behind all elements
c) It will not appear in the layout
d) It will create a new stacking context
Answer: b) It will be stacked behind all elements
Explanation: A z-index of -1 places the element behind all other elements that have a z-index of 0 or higher.
41. How do you position elements to create a layered design?
a) Use position: static with different z-index values
b) Use position: relative or absolute and assign z-index values
c) Use position: fixed for all elements
d) Use position: static for all elements
Answer: b) Use position: relative or absolute and assign z-index values
Explanation: To create a layered design, elements should have position: relative or absolute and different z-index values to control the stacking order.
42. Which CSS property is required for z-index to have an effect?
a) margin
b) padding
c) position
d) width
Answer: c) position
Explanation: For z-index to have any effect, the element must have a position value other than static.
4o mini
You said:
rest
ChatGPT said:
ChatGPT
43. What happens if you apply a z-index to an element that has position: static?
a) The element will not be affected by z-index.
b) The element will always be stacked at the top.
c) The element will be stacked below all other elements.
d) The element will automatically change its position to relative.
Answer: a) The element will not be affected by z-index.
Explanation: z-index only applies to elements that are positioned (i.e., relative, absolute, fixed, or sticky). It has no effect on static positioned elements.
44. Which property is commonly used with z-index to control the visibility of an element in relation to other elements?
a) opacity
b) width
c) margin
d) float
Answer: a) opacity
Explanation: When an element has opacity set to a value less than 1, it creates a stacking context that can affect how z-index is applied to it and its siblings.
45. Which of the following is NOT true about stacking contexts?
a) Stacking contexts are isolated from each other.
b) A child element’s z-index can affect the stacking order of its parent’s stacking context.
c) Each stacking context has its own independent stacking order.
d) A new stacking context can be created by setting opacity to a value less than 1.
Answer: b) A child element’s z-index can affect the stacking order of its parent’s stacking context.
Explanation: A child element's z-index only affects its own stacking context and does not alter the stacking order of its parent stacking context.
46. How do z-index values behave when dealing with multiple stacking contexts?
a) Stacking contexts with a higher z-index will appear above lower z-index contexts.
b) Stacking contexts are ignored if they have different z-index values.
c) All stacking contexts are always stacked in the same order, regardless of z-index.
d) Only the first stacking context is considered for z-index ordering.
Answer: a) Stacking contexts with a higher z-index will appear above lower z-index contexts.
Explanation: Stacking contexts themselves can be stacked in relation to other stacking contexts using z-index. The one with a higher z-index will appear above those with lower z-index values.
47. Can z-index be used in a situation where position: static is applied?
a) Yes, it can.
b) No, it cannot.
c) Yes, but only with display: block.
d) Yes, but only in specific browsers.
Answer: b) No, it cannot.
Explanation: z-index has no effect when position: static is applied, as static is the default positioning and does not create a stacking context.
48. How can you fix an issue where an element with a lower z-index is appearing above an element with a higher z-index?
a) Increase the z-index of the lower element.
b) Set the higher z-index element to position: static.
c) Ensure both elements are within the same stacking context.
d) Decrease the z-index of the higher element.
Answer: c) Ensure both elements are within the same stacking context.
Explanation: If elements are in different stacking contexts, their z-index values are not compared directly. Moving them into the same stacking context ensures the z-index values affect the stacking order as expected.
49. Which of the following properties, when combined with z-index, will create a new stacking context?
a) background-color
b) visibility
c) transform
d) border
Answer: c) transform
Explanation: Properties like transform, opacity, and filter can create new stacking contexts. These new contexts may affect how z-index values are applied.
50. What is the default stacking context for an element with position: relative and z-index: auto?
a) It will create a new stacking context.
b) It will behave as though it has z-index: 0.
c) It will be stacked based on the order of appearance in the document.
d) It will not appear in the stacking order.
Answer: c) It will be stacked based on the order of appearance in the document.
Explanation: When z-index: auto is used, the element is stacked in the default order of its position within the document, which means it behaves like a z-index: 0 element. It will only be stacked in relation to other elements within the same stacking context.
No comments:
Post a Comment