I’m having layering issues. Does anyone have some code for me to make the Sticky Stack (@willwood/Sticky | Stacks4Stacks) go on top of everything else?
https://www.lisasandlerphotography.com/
thanks
thanks
@SteveB Duh. Stick it in a Section Pro stack, of course, thank you.
What does it do weirdly? Can you show me a screen shot?
Edit: Z-index in Sections Pro does not seem to work. Will have to ask @willwood about conflict.
thanks, Lisa
I did change the z-index a few different times… up to 5000 and nothing. I know my menu indexes are not that high.
Sticky has always been a bit off for me… do you think I should try Grummage Sticky? I know Will has a seminar or something this week so he’s only around sporadically.
I did mean Grummage… will try both.
@tav any help on what I can use instead of Sticky? I tried Grummage Sticky and I get this:
Putting a fixed position stack inside something else will not work as it will be pulled out of the flow of the page by the fixed positioning and so its container stack will just be a redundant orphan.
This should fix it, although the sticky class is used by Foundation, you do not have a sticky TopBar (it is fixed) so you should be OK
.sticky{
z-index: 1001!important
}
2 Likes
And there you have it, folks. Thank you Andrew! @tav you’re awesome!
Where to get a pice of cake 
?
1 Like
Come help me blow out my candles 
@LSPhoto The z-index of Sticky stack is 100 which should be more than adequate in any average webpage that’s been coded to a good standard. It doesn’t create any problems in ThemeFlood themes. I find this a sensible value to use. Very high z-index values can otherwise create rather exotic CSS problems (especially with animations) and browser incompatibilities.
I won’t bore you with the technicalities, but generally a z-index value 8 digits long is the largest signed integer that a 32 bit operating system can reliably handle. So you should resist the temptation of lazily using a z-index of something ridiculously high like 999999999999 in any stack or custom CSS – because it won’t work on mobile or older browsers. I’m mentioning this here for prosperity, not suggesting this is something you would actually do in real life. 
Did you read the documentation for Sticky stack? The custom CSS code you need (if you want to increase the z-index) is already clearly presented on the website, and always has been:
Unless I’ve missed something, I can’t see how this is different to what you’re asking for here on the forums? There is a whole section written there already about custom CSS to manipulate layering and trying to resolve buggy layering with other stacks. I tested it and it works as expected.
Typically I am less inclined to start fighting the layering of other elements in the page. I prefer to stop and question why other elements might need such high z-index values. Otherwise this just becomes a game of cat-and-mouse – endlessly trying to out-do the next element on the page with spiraling z-index values.
I hope this helps.
2 Likes
I went back to the Sticky page but missed that. Sometimes my eyes glaze over looking at code 
I will resist the temptation to get crazy with the z-index.
thanks, Lisa
Great website, @SteveB Thanks for the tip as well.
The number 2,147,483,647 is the maximum positive value for a 32-bit signed binary integer.
You’d need to be catering for ridiculously old browsers to worry about capping at 24bits (8 digits) not that there’s often a need for these ridiculously high numbers.
Browser │ Max z─index value │ When exceeded, value changes to: │
╞══════════════════════╪═══════════════════╪══════════════════════════════════╡
│ Firefox 0 - 2 │ 2147483647 │ element disappears │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Firefox 3 │ 2147483647 │ 0 │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Firefox 4+ │ 2147483647 │ 2147483647 │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Safari 0 - 3 │ 16777271 │ 16777271 │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Safari 4+ │ 2147483647 │ 2147483647 │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Internet Explorer 6+ │ 2147483647 │ 2147483647 │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Chrome 29+ │ 2147483647 │ 2147483647 │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Opera 9+ │ 2147483647 │ 2147483647
I’m not using those ridiculously high numbers (I think maybe 25 is the highest after I changed the menus z-index), but I still am having some issues with Refined Slider @willwood… https://www.lisasandlerphotography.com/client-products/gifts/
