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
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
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
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.
4. Which of the following position is based on the user’s scroll position?
a) fixed
b) sticky
c) relative
d) static
View Answer
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
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.
6. What sets the stack order of an element?
a) z-index
b) right
c) top
d) position
View Answer
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
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.
8. Which of the following is positioned relative to the nearest positioned ancestor?
a) absolute
b) static
c) clip
d) relative
View Answer
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.
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
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.
If you find a mistake in question / option / answer, kindly take a screenshot and email to [email protected]
- Check Computer Science Books
- Check CSS Books
- Practice MCA MCQs
- Practice HTML MCQ
- Practice Computer Science MCQs
