I have a div with a absolute position and a div with relative position. The first div contains the links and the second div contains some contents which is over the first div. The first div has a z-index of 1, while the second has a z-index of -1 and the first div is also declared first.
Although, the links in the first div are unclickable. I have now idea, why this is so.
Fiddle
Both side1 and side2 will have a background image. And the content should appear over the sides, but the links should still work.
Second fiddle
Either change .side to have z-index: 1, or change #container to have margin-top: 150px instead of padding-top.
#books has a z-index of 1, but it's inside a container with a z-index of -1, so it still ends up below the #container which has z-index: -1 but gets rendered after (thus on top).
In your code you have
z-index: -1;
position: absolute;
I think this is the reason. Changing -1 to 1 fixes it. Not sure if I'm missing something, if so, please explain in comments and/or update the question.
the links are unclickable because a div tag is over leaping it.
This tag:
<div class="side side2"></div>
give the .side2 element a lower z-index to hide it.
Your first div and your second div, both share the class .side, which is defined with a z-index: -1. So both are on the same stack level and the one that comes last in the markup will be on top of the previous. All you have to do is to give .side1 a z-index bigger than -1.
Related
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 know this question has been asked multiple times, but I can't get it to work.
I have 1 screen container, in which I want 2 div's (1 content, 1 menu) next to each other.
1 div is positioned relative,
left:-830px.
So I can create a slide in effect using overflow:hidden and jQuery.
Here is a JSFiddle: http://jsfiddle.net/XWsS8/4/
Does anyone know why this isn't working?
I've seen more examples using inline-block which causes two div's to be next to each other, why does it not work in my example?
Thanks in advance :)
P.S. I don't want to use float
Has nothing to do in this case with inline-block but rather that you have #menu as position: relative instead of position: absolute. See fiddle with change.
A position: relative still causes the element to occupy the same space in the layout as it would if it were static (here's a good explanation), it just shifts the element's display rendering by the adjusted amount (-830px in your case) relative to itself (where it would have been if static).
So the second element in your case is being displaced by the "void" left from where the first element is still taking up layout space, but has been shifted outside it for rendering.
Another solution would be to keep the relative on #menu and set margin-left: -830px on the #content div to "pull" it over the space the #menu layout is taking up, as seen in this fiddle.
Both solutions offered, when the menu animates, will "overlay" the #content assuming #menu is given a z-index: 1 (see 1st solution fiddle and 2nd solution (with menu at -430px), whereas if you wanted the second solution offered to "push" the #content down below the menu on animation, then you would also have to change the margin-left back to 0 at the time of menu animation, like this fiddle shows.
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.
I need #slides_ribbon_left and #slides_ribbon_right to put behind the #frame. I am wonder why z-indexes don't help! Here is the link - http://layot.prestatrend.com/
Could anybody help please?
#slides has z-index: 100 and #frame z-index: 0 and they're sibblings so any child elements of #slide will be above #frame. As far as I can see you'll need to change some html as well. The following link may help too: https://developer.mozilla.org/en/Understanding_CSS_z-index/The_stacking_context
You need to use a relative, fixed, or absolute position on elements for z-index to take effect.
Just add position: relative to each element (or fixed or absolute, depending on what you want).
Every time I try to use z-index in a webpage to change the order of stacking overlapping divs, I seem to run into a problem where the div that is being forced lower becomes unresponsive to mouse events.
In my current situation I have:
<div class="leftcolumn">
<div class="leftbar"></div> <!-- a 95px wide bar on the left -->
...
<h3>header</h3> <!-- a little header sitting inside the leftbar
...
</div>
By default the h3 isn't showing - it's hidden behind the leftbar. If I add z-index: 5; to the h3, it still doesn't show.
So I add z-index: -1 to the leftbar. Now it's hidden behind the leftcolumn - but at least h3 shows.
So I add z-index: -2 to the leftcolumn. Now everything looks right - but you can't click on anything inside leftcolumn. The mouse cursor doesn't change from an arrow.
I get this exact behaviour in both Chrome and Firefox. IE7 doesn't show the leftbar at all, but at least stuff is clickable.
So, am I misunderstanding z-index, or is there a bug in both FF and Chrome here? Can z-index be effectively used for this kind of stuff, or do I have to find another way?
(I can change the HTML, but the less, the better.)
Ok, 10 seconds later I discover that using only positive z-index'es makes the problem go away. Perhaps negative z-index means the object is below the level that the mouse cursor notionally lives?
Do you know that in order for z-index to work right, you need to position your elements, even if they're simply position: relative (which doesn't change their position any but allows you to use z-index). That way, you should be able to give leftbar a position of, say, 2 and your h3 a position of, say, 3. And your h3 should be on top.
You can use any position type as long as you have one.
For recap:
#leftcolumn { position: absolute; z-index: 1; }
#leftbar { position: relative; z-index: 2; }
h3 { position: relative; z-index: 3; }
Even though the leftcolumn content is visible, the leftbar div is now sitting on top of it, likely with a transparent background. Ideally you would want to modify the HTML so that the H3 resides within the leftbar, but if that is not an option, you may need to apply z-index to specific elements within the leftcolumn in order to pull them above elements in the leftbar.