CSS z-index Property | Interview Prep | Browser Module

FAQ

1. What happens if two elements have the same z-index?
Answer:  If two elements have the same z-index, their order in HTML determines which element is placed in front of the other one 

2. What determines Z-index ?
Answer: The z-index property determines the stack level of an HTML element.

3. What is the purpose of Z-index ?
Answer: The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.

4. Can Z index be used without position?
Answer: Yes,  z-index has no effect for position:static (the default).

5. Is Z Index inherited?
Answer: No, it isn't inherited.

6. Why is Z index ignored?
Answer: There's actually two reasons: 
    i) Its parent is set to show up behind the logo.
   ii) Any z-index applied to elements within that parent element will only apply to other elements within that parent.

7. Does opacity affect Z-index?
Answer: Z-index are only significant within the context of a positioned ancestor (whether its relative, absolute or fixed)

MCQ

1. what is the default value of z-index?
    a) 1
    b) 0
    c) undefined
    d) null

Answer: b) 0


2. In CSS, z-index is used to do what?
    a) To create a big Z on the index page
    b) Increase speed; make the index page go zip
    c) Bring div elements to the front or back of other div elements on a webpage
    d) Make images popup
    
Answer:  c) Bring div elements to the front or back of other div elements on a webpage    


3. 1. How many types of position values are there in CSS?
    a) 2
    b) 3
    c) 4
    d) 5
    
Answer: c) 4    


4. By default which position element holds more priority ?
    a) absolute
    b) fixed
    c) relative
    d) unpredictable
    
Answer: b) fixed