So I know there are a plethora of questions about position fixed/relative/absolute in relation with z-index, but I still couldn't figure out my question using those.
Essentially I have a header that is fixed. It works perfectly fine, everything goes behind it when scrolling down the page.
I recently wanted to add links to div ids, but in order to account for the header, I had to add the following code where link is the parent element, and then linkTo is the class of something with an ID that we actually link to. This functionality works completely, providing the correct offset so that the header is above the div we want.
.link {position: relative;}
.linkTo {position: absolute; top: -80px;}
The problem with this, is that for some reason now my div is behind everything on the page. I can still see it but the text and images are in front.
I've tried adding z-index to my header (of like 9999) but it isn't working. I don't understand why adding position relative would mess up the order of how things are displayed.
I'd like to provide an example, but my code is rather large. If this isn't enough I can try to make a jfiddle later.
Add position: relative; z-index:9999 to the parent element it will keep this element stick inside the menu.
As Ganesh said, adding position: relative to the parent element of the header was the starting step. After that adding z-index to the same parent element fixed the problem completely.
Check for a lower z-index on a parent element, it appears to override the z-index of children.
I've run into z-index issues in the past with drop down menus and jquery UI tabs. I thought it had something to do with the stacking effects created us rules like opacity or transition, but for me the problem was a parent element having a lower z-index than a child element.
Related
Code pen showcasing problem.
https://s.codepen.io/NoMan2000/debug/rdPEYJ/xnrabdnqJadA
I apologize for the rather gnarly HTML, but this is output from a next.js project so the bloated mess is part and parcel of that.
Anyway, the problem can be seen in the element #header-menu-buttonList. The idea is pretty simple, a menu that goes underneath the main grid element. But for whatever reason, it just sits there on the page.
You can pick it up in the debug tools and see that it has a width and a height. Messing with its z-index doesn't make the object visible, only removing the position: absolute makes it visible on the page, but that opens up a whole host of other issues.
So, anyone know:
1.) Why the heck it's doing that?
2.) How to either fix it or work around it?
Thanks for the rubber-ducking. :)
So the issue is that the parent element is positioned absolutely, and the child element is positioned absolutely. I'm not up to snuff on all my CSS rules, but this appears to keep it in the DOM but not render it visible.
The solution is to set the child #header-menu-buttonList to position: static and the parent #header-menu-button to position:absolute.
I'm having trouble with the order of layered DIV elements. I have a DIV .lens-flare that's at the bottom of the hierarchy in HTML. Yet when I transform: translate the position so it encompasses the entire parent DIV, it shows above elements that are above it in the hierarchy.
So I tried setting z-indexes, and then turned my translate into translate3d. Still I'm not able to get .lens-flare underneath .top-nav-bar, .nav-bar, or .cta.
Currently I have a pointer-events: none applied so I can at least click on the things underneath. But how can i actually move the .lens-flare layer under everything else successfully?
Here's my CodePen for the project
Elements rendered later are considered being closer to the screen than the elements rendered before them.
Z-index is the answer if you want to change this, you just need to remember z-index works only with elements that are positioned.
.lens-flare
position: relative
z-index: 1
.nav-bar, .top-nav-bar, .cta
position: relative
z-index: 2
Your corrected codepen: http://codepen.io/sEvher/pen/doyWoW
I'm building a demo for an app I want to create and I am trying to create buttons on a mobile phone. I brought in an image of a phone and created buttons set to absolute positioning which allows me to layer them over the phone, but when I go to resize the page, the element moves a lot and does not stay in the same place on the phone. How can I fix this? Please see fiddle to see exactly what I mean: http://jsfiddle.net/x313vkup/
I would really appreciate a modification of my fiddle link so I can understand how this works.
This is a snippet of the code that shows the list set to absolute positioning:
#phone_view {
position: absolute;
margin-top: -65%;
margin-left: 15%;
}
The beauty of position:absolute is that you can accomplish a lot without setting margins -- you can go straight to using top, left, etc.
An absolutely-positioned element needs to be positioned relative to a wrapper, however. I would recommend setting your #phone element to position: relative and then setting the position and dimensions of #phone_view "manually" in the CSS.
I would also recommend creating another wrapper element inside of phone to act as the relatively positioned element, since your h4 can wrap onto a second line, drive down the phone image, and get it out of sync with the absolute positioning.
EDIT: link to JSFiddle. Note the relatively-positioned wrapper (.phone-wrap). Child elements with position: absolute will define their position based on this wrapper. Also, no need for margins on #phone_view.
Also, re: #phone_view, background-color is just to make it visible for the demo, and while overflow: auto seemed appropriate for the demo, it doesn't affect the positioning of the object itself.
What I'm trying to do is literally as the question says, float a span outside of a table, but keeping the span tag within it (for per row reuse purposes).
My understanding was that I needed to use something like overflow: visible;, but this does not seem to be having the desired effect (it's currently everywhere in the fiddle below as I was messing with testing it, but I think if it was working, I'd only need it in the inner div (the one using divStyle2)?
http://jsfiddle.net/uVQHr/
You simply need to add position: relative to the span's parent <td>.
Here's an updated Fiddle.
The problem is not to do with overflow - you were positioning the <span> outside the viewport. If you had inspected the element using your dev tools you would've seen it positioned off the left edge of the screen. You can remove all the overflow: visible properties now too.
position: absolute positions the element relative to the closest parent element with a position attribute that's something other than static (default). Your code was positioning the span relative to the <body> as no element with a position was found.
Open up http://irule.at/quovadis, and it will show you a regular theme. The problem is that the div photos is not showing up. It's most likely hiding behind body/html because of the z-index, but I want them to show behind the divs in the middle. How do I fix this?
It looks like you're using a negative z-index for photos. Instead of that, use a positive or 0 index, and give the other elements a higher index. Also remember that in order for z-index to work the elements should have position: relative. I got photos to show up by having it z-index 1, having header z-index 2 and position relative.
You've had an answer, but thought I'd chip in a little to clear things up.
Z-indexing requires an element to be positioned, not necessarily relative or absolute as you've already figured out, but fixed is also an option.