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).
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'm trying to place a div on top of all divs in a web page.
The common question to this is:
prepend your div to the body element
add a z-index property bigger than every other's
The problem:
i can't move my div in the DOM tree (due to angular limitations)
After reading the following article, it seems to me to be impossible.
Is that so?
http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Any help is much appreciated
UPDATE:
Thank you guys
#user2604405 - I forgot to mention the fact that I want this div to cover all page, so I think only position: fixed is pertinent.
#shujatAli - I've said I can't move the div due to angular limitations.
#Explosion Pills - It is ok to move the div, as long as it covers all page.
#Flavio Paulino - z-index solution won't work =/ (the div is way down in the DOM tree).
#Jasper - I've tried using position: fixed; but it doesn't work since other divs also have z-index defined. And I can't clone the elemento to body because it's outside my AngularJS module which break my model bindings
yes!
just add the highest z-index on this div, like:
z-index: 1030;
Yes it is possilbe in three ways
Relative
div
{
position:relative;
left:-20px;
}
relative positioning will retain the original place of the element
Absolute
div
{
position:relative;
left:-20px;
}
Absolute positioning will not retain the original place
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
The above code is overlapping elements positioning, it can be made available by setting the z-index property.
I tried to use HTML+CSS to generate simple inline info popups, yet I was not able to make it work as intended. In particular, the popup div container ignores my max-width and z-index settings.
I posted a small demonstration on jsfiddle.
Can someone please enlighten me? What am I missing? Many thanks in advance!
You need to set positions to absolute/relative/fixed in order for z-index to work http://jsfiddle.net/NMh8j/12/
If you change .faq>.body to position:fixed, the 240px width is observed, and the top : 12px is moving the popup over the underlying ?. You can then drop the left-20px as well as it will center itself.
jsFiddle update
Your .head hasn't any position specified, change your CSS to :
.faq:hover>.head {
position: relative;
border-color:#cccccc;
border-bottom-color:#ff0000;
z-index:100;
}
z-index need the position property to be fixed (fixed, absolute, relative.. but not static, which is the default value)
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.
I have a div with position relative and z-index :-1. and I have placed <A> over that
div. But it seems <a> is not working when i give postion :relative to its parent. when change that
position to absolute it starts working. Could anybody tell me why this is happening.
I want that link to work and as far as possible need to keep its parent div
position :relative
and z-index:-1;
position:relative will make the z-index relative to the parent.
http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index
Negative z-index cause a links to not work:
See this fiddle