Re: CSS-the z index property, but ALSO positions...

In the CSS Tutorial, there is a section called the z-index property. In it you are shown how one box can overlay/overlap another. I wanted to see what would happen if I changed the position from relative to fixed or static. From what I could see, it made absolutely no difference at all! Why? I hope someone can help me out with this. I mean, if this is only the case in this instance, well, fine. But if not, then why even have such a command or I guess element (not command) in this case.

html css positioning z-index css3

26th Sep 2017, 7:38 PM

Michael

2 Answers

+ 1

The positioning is where on the page you want the box to be displayed, from top left corner. z-index is used to specify which box should be in front of the other one...

26th Sep 2017, 8:13 PM

Benni

+ 3

'position' set how the element is moved/displayed, if you move it from its initial (auto-computed) place... and how it will reserve space for displaying it. + 'static' is the default value (normal default behaviour of any element): take some place (regarding width height margin...) and come after previous element. + 'relative' will position the element normally (no visual change) until you use 'left', 'top', 'right' and/or 'bottom' properties to specify where you want to move the element, relatively to itself normal position. Place (space) normally required for displaying it is not moved and still exist + 'absolute' will position the element without reserving space for displaying it (really out of the normal content stream). Default position is exactly where the element would be placed if it remain a 'static' (default) position value. Moving it is done by using 'left', 'top' and so on property, no more used relatively to itself but to its first 'positioned' parent (using a 'position' value different from 'static' -- or if none, relatively to the <body>/window root element) + 'fixed' works as 'absolute', but don't scroll with user scroll (as it was fixed at the viewport instead of the page content) On the other hand, 'z-index' will determinate in wich order to display each positioned elements (but have no effect on 'static' ones) if they overlap each others (default order is last declared is above previous ones)...

27th Sep 2017, 7:41 AM

visph