void-linux.github.io
void-linux.github.io copied to clipboard
void-linux
Adding z-index to navbar, fix issue #168
This really feels like a hack and there's a correct way to do this. Lets hold this PR while more discussion happens around if we really want to introduce z-index hacks to the site.
This really feels like a hack and there's a correct way to do this. Lets hold this PR while more discussion happens around if we really want to introduce z-index hacks to the site.
What is the correct way to do it, sir?
The correct way is to play with the display and margin parameters, I think... but having not tried to fix this, I can't say for sure.
The correct way is to play with the
displayandmarginparameters, I think... but having not tried to fix this, I can't say for sure.
I think there is nothing wrong using z-index, website like google also use z-index in their topbar. Changing display (maybe to fixed position) does not change the order of html element. HTML Element stack order is in sequence order, so if you don't want use z-index, you must move your navigation header element to bottom of html, before body tag is closing (so the element will show at top, becuase of element sequence order).
Margin does nothing with this.
It's in my opinion.
Reference : https://www.w3schools.com/cssref/pr_pos_z-index.asp
I think it's worth noting that you don't need a value of z-index as high as 1000 to resolve the issue. 1 is enough. A way of resolving this without z-index rules is to wrap the nav in a div with top: 0; position: fixed; width: 100%, then move that div to be the last element in body and add a 70px margin to the top of the main container.
margin was good as long as navbar was single row of text, but this is no longer guaranteed. See https://github.com/void-linux/void-linux.github.io/pull/166 that introduced issue discussed here. The issue was not identified back then, as it occurs on main page that uses positioned elements, while Acknowledgments page only use non-positioned.
Looks like z-index is necessary here: bootstrap 5 sets it together with any sticky element. https://github.com/twbs/bootstrap/blob/d17801265e3562e5386b3445b84915618f5a81d7/scss/helpers/_position.scss#L24-L28
As @Chocimier said, z-index might be necessary, wether we use sticky or fixed position. The solution profided by Bootstrap3 (.navbar-fixed-top) is using z-index too (https://github.com/twbs/bootstrap/blob/bcf7dd38b5ab180256e2e4fb5da0369551b3f082/less/navbar.less#L144).
And moving navbar to the last element of body would be unintuitive IMO.
