CSS Questions & Answers – Sliding Doors & Clipped Sliding Doors

CSS Multiple Choice Questions & Answers (MCQs) focuses on “Sliding Doors & Clipped Sliding Doors”.

Q 1. Which of the following does not support the “:hover” pseudoclass?
A. IE 6
B. Chrome
C. Opera
D. Safari

Show Answer

Answer:-A. IE 6

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.

Q 2. Which class is used for setting perspective and scroll properties for the page?
A. .static
B. .section
C. .wrapper
D. .parallax

Show Answer

Answer:-C. .wrapper

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.

Q 3. Which of the following is used for adding perspective background images for each section?
A. .bg1
B. .parallax
C. .static
D. .section

Show Answer

Answer:-A. .bg1

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.

Q 4. Which of the following position is based on the user’s scroll position?
A. sticky
B. fixed
C. relative
D. static

Show Answer

Answer:-A. sticky

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.

Q 5. Which of the following does not support sticky version?
A. Firefox
B. Opera
C. IE
D. Chrome

Show Answer

Answer:-C. IE

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.

Q 6. What sets the stack order of an element?
A. z-index
B. right
C. top
D. position

Show Answer

Answer:-A. z-index

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;}

Q 7. What clips an absolutely positioned elements?
A. right
B. bottom
C. position
D. clip

Show Answer

Answer:-D. clip

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.

Q 8. Which of the following is positioned relative to the nearest positioned ancestor?
A. clip
B. static
C. absolute
D. relative

Show Answer

Answer:-C. absolute

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.

Q 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

Show Answer

Answer:-A. static

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.