Why does z-index not work?
The z-index
property only works on elements with a position
value other than static
(e.g. position: absolute;
, position: relative;
, or position: fixed
).
There is also position: sticky;
that is supported in Firefox, is prefixed in Safari, worked for a time in older versions of Chrome under a custom flag, and is under consideration by Microsoft to add to their Edge browser.
iPad Safari scrolling causes HTML elements to disappear and reappear with a delay
I was using translate3d before. It produced unwanted results. Basically, it would chop off and not render elements that were offscreen, until I interacted with them. So, basically, in landscape orientation, half of my site that was offscreen was not being shown. This is a iPad web application, owing to which I was in a fix.
Applying translate3d to relatively positioned elements solved the problem for those elements, but other elements stopped rendering, once offscreen. The elements that I couldn't interact with (artwork) would never render again, unless I reloaded the page.
The complete solution:
*:not(html) {
-webkit-transform: translate3d(0, 0, 0);
}
Now, although this might not be the most "efficient" solution, it was the only one that works. Mobile Safari does not render the elements that are offscreen, or sometimes renders erratically, when using -webkit-overflow-scrolling: touch
. Unless a translate3d is applied to all other elements that might go offscreen owing to that scroll, those elements will be chopped off after scrolling.
(This is the complete answer to my question. I had originally marked Colin Williams' answer as the correct answer, as it helped me get to the complete solution. A community member, @Slipp D. Thompson edited my question, after about 2.5 years of me having asked it, and told me I was abusing SO's Q & A format. He also told me to separately post this as the answer.
@Colin Williams, thank you! The answer and the article you linked out to gave me a lead to try something with CSS. So, thanks again, and hope this helps some other lost soul. This surely helped me big time!)
z-index not working with elements whose parents are in fixed position
The simple solution is that what I'm trying to do is simply impassible.
The answer by #Krypton indeed solve this issue by altering the html, however in my situation altering the html order isn't possible.
The order of elements is called the Stacking Order, the stacking order is:
1. If no z-index or position then the stacking order is as the html markup order.
2. All positioned elements (relative
, absolute
and fixed
) appear on top of all none positioned elements (static
).
3. z-index works only on positioned elements, and it will create Stacking Context.
Stacking Context
Group of elements with common parent create Stacking Context if one of the next conditions are meet:
1. The root document element (the <html>
element).
2. Positioned element with z-index
3. Element with opacity less the 1 (this isn't known by most of web developers)
All the elements in Stacking Context move together in the stacking order,
meaning that if element a
inside staking context A
, can't be above element b
inside staking context B
, if the stacking order of B
is higher the A
,
even if the element 'a' has z-index of a million.
Update: new css roles that create Stacking context: transform
, filter
, css-region
and pages_media
.
The order inside the Stacking Context:
1. root element
2. positioned element with negative z-index.
3. none positioned elements in the order of the html markup
4. positioned elements
5. positioned elements with z-index according to the z-index.
- Now back to the question, in this example both the red and the green div create stacking context since they are positioned (fixed) and have z-index.
- Both of them have the same z-index (value of 2), therefor there stacking order is the red below the green since this is the order of the html markup.
- Now lets look at the pink and the lightgreen elements, the pink is nested inside the red elements and the lightgreen inside the green elements,
since the red element has lower staking order than the green, all the nested elements inside the red elements appear below all the elements inside the green elements.
To fix this issue we need to create a new element that will create a new stacking context with higher stacking order than the red and the green div and place our popups inside of that elements.
Reference: What No One Told You About Z-Index by Philip Walton:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Related Topics
How to Load a Url Link That Is Inside a Web View and Keep It in That Web View in Swift
Cocoa Touch: How to Change Uiview's Border Color and Thickness
Uiview Backgroundcolor Disappears When Uitableviewcell Is Selected
How to Dismiss a Storyboard Popover
Tap on a Part of Text of Uilabel
Setting Scroll Position in Uitableview
Rotate a Uiview Around Its Center But Several Times
Uiimagepickercontroller Crashes App | Swift3, Xcode8
Upload Files to Dropbox from iOS App with Swift
How to Bring Application to Foreground in iOS
Custom Cell Row Height Setting in Storyboard Is Not Responding
How to Get the Height and Width of an Uiimage
Get Current iPhone Device Timezone Date and Time from Utc-5 Timezone Date and Time iPhone App
How to Draw Radial Gradients in a Calayer
Wireless iPhone App Distribution - Problem with Itms-Services Protocol