CSS Question Paper on “Sliding Doors & Clipped Sliding Doors”.
1. Which of the following does not support the “:hover” pseudoclass?
a) IE 6
b) Chrome
c) Opera
d) Safari
Answer: a
Clarification: IE 6 does not support the “:hover” pseudoclass on elements other than anchor tags. To get hover work in IE6, we create a class that duplicates the :hover styles, and then script a function to toggle that class on/off.
2. Which class is used for setting perspective and scroll properties for the page?
a) .wrapper
b) .section
c) .static
d) .parallax
Answer: a
Clarification: .wrapper sets the perspective and scroll properties for the whole page, .section is for size, display and text properties, mostly not relevant to parallax effect, .static add a background to a section, just for demonstration.
3. Which of the following is used for adding perspective background images for each section?
a) .bg1
b) .parallax
c) .static
d) .section
Answer: a
Clarification: .bg1, .bg2 adds the respective background images for each section, we can use img tag also, .parallax adds an ::after pseudo-element with the background image and transforms needed for the parallax effect.
4. Which of the following position is based on the user’s scroll position?
a) fixed
b) sticky
c) relative
d) static
Answer: b
Clarification: An element with position: sticky, is positioned on the user’s scroll position. A sticky element toggles between relative and fixed, depending on scroll position, It is positioned relative until a given offset position is met in the viewport, then it “sticks” in place.
5. Which of the following does not support sticky version?
a) Firefox
b) Opera
c) IE
d) Chrome
Answer: c
Clarification: Internet explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires a –webkit-prefix. W should also specify at least one of the top, right, bottom or left for sticky positioning to work.
6. What sets the stack order of an element?
a) z-index
b) right
c) top
d) position
Answer: a
Clarification: The z-index property specifies the stack order of an element i.e. which element should be placed in front of, or behind, the others, an element can have positive or negative stack order,
img {position: absolute; left: 10px; top: 10px; z-index: -1;}
7. What clips an absolutely positioned elements?
a) right
b) bottom
c) position
d) clip
Answer: d
Clarification: clip clips an absolutely positioned element, bottom sets the bottom margin edge for a positioned box, position specifies the type of positioning for an element, right sets the right margin edge for a positioned box.
8. Which of the following is positioned relative to the nearest positioned ancestor?
a) absolute
b) static
c) clip
d) relative
Answer: a
Clarification: An element with position: absolute; is positioned relative to the nearest positioned ancestor, instead of position relative to the viewport like fixed. However, if an absolute positioned element has no positioned ancestors, it uses the document body and moves along with page scrolling.
9. Which of the following position element is not affected by the top, bottom, left etc. property?
a) static
b) clip
c) relative
d) absolute
Answer: a
Clarification: HTML elements are positioned static by default, static positioned elements are not affected by top, bottom, left and right properties. An element with position: static; is not positioned in any social way, it is always positioned according to the normal flow of the page.