CSS Questions & Answers – Sliding Doors & Clipped Sliding Doors

This set of CSS Question Paper focuses 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
View Answer

Answer: a
Explanation: 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
View Answer

Answer: a
Explanation: .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
View Answer

Answer: a
Explanation: .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.
advertisement
advertisement

4. Which of the following position is based on the user’s scroll position?
a) fixed
b) sticky
c) relative
d) static
View Answer

Answer: b
Explanation: 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
View Answer

Answer: c
Explanation: 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.
Sanfoundry Certification Contest of the Month is Live. 100+ Subjects. Participate Now!

6. What sets the stack order of an element?
a) z-index
b) right
c) top
d) position
View Answer

Answer: a
Explanation: 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
View Answer

Answer: d
Explanation: 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.
advertisement

8. Which of the following is positioned relative to the nearest positioned ancestor?
a) absolute
b) static
c) clip
d) relative
View Answer

Answer: a
Explanation: 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.
advertisement

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
View Answer

Answer: a
Explanation: 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.

Sanfoundry Global Education & Learning Series – CSS.

To practice all questions papers on CSS, here is complete set of 1000+ Multiple Choice Questions and Answers.

advertisement
advertisement
Subscribe to our Newsletters (Subject-wise). Participate in the Sanfoundry Certification contest to get free Certificate of Merit. Join our social networks below and stay updated with latest contests, videos, internships and jobs!

Youtube | Telegram | LinkedIn | Instagram | Facebook | Twitter | Pinterest
Manish Bhojasia - Founder & CTO at Sanfoundry
Manish Bhojasia, a technology veteran with 20+ years @ Cisco & Wipro, is Founder and CTO at Sanfoundry. He lives in Bangalore, and focuses on development of Linux Kernel, SAN Technologies, Advanced C, Data Structures & Alogrithms. Stay connected with him at LinkedIn.

Subscribe to his free Masterclasses at Youtube & discussions at Telegram SanfoundryClasses.