I have floating button set to position fixed with a z-index of 9999.
When I scrolls the page, some elements see through the button.
So I have set the element to position as relative with a z-index of 10, still sees through.
When I set to -1, it works, but then the element becomes unclickable.
How can I make this work?
#button {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
}
#carousel {
position: relative;
z-index: 1;
}
I've already done the research and saw this post, z-index not working with fixed positioning, but with so solutions to my issue.
Without the HTML and the rest of the code, it would be impossible to help.
From the code you posted, it should work.
It might be a problem from the Parents' Stacking Context.
If you have something like:
<div id="parent-1" style="z-index: 1">
<div id="myDiv" style="z-index: 9999"></div>
</div>
<div id="parent-2" style="z-index: 2"></div>
The [#myDiv] one will always be under the [#parent-2].
Because of the [#parent-1] stacking context (layer) is under the [#parent-2] stacking context (layer).
Another common issue is with using 'transform' on the Parent element, which opens up another bag of hurt.
Related
I am working on a fiddle
I want to override a video on the top of a text. The HTML code which I have used in order to make a video/text is:
<div class="player-elements">
<div class="grid-stack">
<iframe class ="video" width="800" height="500" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
</div>
</div>
<div class="hello-world" style="">
<p>Hello World</p>
</div>
I am wondering what changes I should make in the CSS so that the video gets on top of the "Lorem ipsum dolor sit amet, consectetur adipiscing." text.
I tried by adding position:relative ,position:absolute and z-index but somehow it doesn't seem to work.
css is a styling language not a markup language to build content
your problem comes from a css code already exists
you can try to select to select positions for both of them absolute.
.grid-stack{
position: absolute;
}
.hello-world {
position: absolute;
}
First you need to learn how work with spect element :D after that you can done your job even with try and catch
z-index for implant to element needs a position
so there as you can see its fixd
http://jsfiddle.net/1hz8v4qc/43/
.player-elements {
z-index: 100;
position:relative;
}
.hello-world
{
text-align: center;
font-size: 50px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 80;
}
Good Luck
Each page is made up of a stack of elements. z-index is a way we can add a layer to that stack. In order to create another stack we have to purposely set the position to fixed, absolute, or relative.
check out this SO answer for a more detailed response to this.
z-index values can be negative or positive but the default value is 0.
The different types of css positions are
Relative. This type of positioning is probably the most confusing and
misused. What it really means is "relative to itself". If you set
position: relative; on an element but no other positioning attributes
(top, left, bottom or right), it will no effect on it's positioning at
all, it will be exactly as it would be if you left it as position...
Absolute. This is a very powerful type of positioning that allows you
to literally place any page element exactly where you want it. You use
the positioning attributes top, left, bottom. and right to set the
location. Remember that these values will be relative to the next
parent element with relative (or absolute) positioning...
Fixed. This type of positioning is fairly rare but certainly has its
uses. A fixed position element is positioned relative to the viewport,
or the browser window itself....
You can read more Here
.hello-world{
position: fixed;
z-index: 1;
}
.player-elements{
position: fixed;
z-index: 2;
}
<div class='container'>
<div class="player-elements">
<div class="grid-stack">
<iframe class ="video" width="800" height="500" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
</div>
</div>
<div class="hello-world" style="">
<p>Hello World</p>
</div>
</div>
Try this fiddle the snippet doesn't seem to run the youtube video.
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 2 years ago.
<div class="content-wrapper">
<div class="popup">
<div class="close">
</div>
</div>
</div>
.content-wrapper is relatively positioned and contains all the page content (not just the popup).
.popup is absolutely positioned.
.close is also absolutely positioned.
I have some javascript to move close when the cursor enters popup (so I have a nice close bar appear out the side). The best way I have found to do this is just to move using jQuery animate. Hiding/showing creates a stuttering affect even .stop() wasn't able to solve. My problem is in trying to hide .close behind .popup. No matter what z-index I set for the two divs .close will not sit behind .popup.
Is it possible to have an absolutely positioned div inside another absolutely positioned div sit behind its parent, and if so how?
Yep, use z-index: http://jsfiddle.net/tGd4Q/
HTML:
<div class="content-wrapper">
<div class="popup">
<div class="close">
</div>
</div>
</div>
CSS:
.popup, .close { position: absolute; height: 200px; width: 200px; }
.popup { background: #f00; }
.close { background: #ff0; top: 25px; left: 25px; z-index: -1; }
This won't work with IE7 standards though. I suggest using jQuery(or other framework of your choosing) to hide the div:
$('.popup .close').hide();
Stacking indices are most of the time relative to siblings, so you cannot put a child behind it's parent using z-index.
Here is some more information about that.
This is the stacking order:
The borders and background of the current stacking context
Positioned descendants with negative z-index
Nonpositioned block-level descendants with no z-index property defined -- paragraphs, tables, lists, and so on
Floating descendants and their contents
Nonpositioned inline content
Positioned descendants with no z-index, z-index: auto, or z-index: 0
Positioned descendants with z-index greater than 0
Nick McCormack uses z-index: -1 in his answer. This is indeed one exception to what your feelings give in. Beware that z-index: -1 moves an element behind many of your elements to the background.
Browser differences
Beside that, Internet Explorer does not support negative stacking indices and is very strict with element (child/parent) positions. Every element level has it's own stacking context, so have to 'communicate' via the parent element. See this explanation.
According to Smashing Magazine, the select element, which is a windowed control, has naturally a higher stacking index.
According to the Shadowbox troubleElement option, I presume that object, embed and canvas have the same issues.
If you want to hide .close, why don't you really hide it instead of moving it behind .popup?
$('.close').hide();
No, you will not be able to put it behind its parent. However you could change its display mode to none, so it isn't seen at all. Then when you need to see the div, change it to show.
Simple jQuery:
$('.close').hide();
$('.close').show();
There are other ways as well, such as adding an attribute of style with display:none or display: inline-block as a setting.
Update: According to comments in other answers, there IS a way to do it with z-index. Still thinking the hide/show is the way to go though. Very clear what you are doing on your UI.
I have two DIVs that I need to position exactly on top of each other. However, when I do that, the formatting gets all screwed up because the containing DIV acts like there is no height. I think this is the expected behavior with position:absolute but I need to find a way to position these two elements on top of each other and have the container stretch as the content stretches:
The top left edge of .layer2 should be exactly aligned to the top left edge of layer1
<!-- HTML -->
<div class="container_row">
<div class="layer1">
Lorem ipsum...
</div>
<div class="layer2">
More lorem ipsum...
</div>
</div>
<div class="container_row">
...same HTML as above. This one should never overlap the .container_row above.
</div>
/* CSS */
.container_row {}
.layer1 {
position:absolute;
z-index: 1;
}
.layer2 {
position:absolute;
z-index: 2;
}
Actually this is possible without position absolute and specifying any height. All You need to do, is use display: grid on parent element and put descendants, into the same row and column.
Please check example below, based on Your HTML. I added only <span> and some colors, so You can see the result.
You can also easily change z-index each of descendant elements, to manipulate its visibility (which one should be on top).
.container_row{
display: grid;
}
.layer1, .layer2{
grid-column: 1;
grid-row: 1;
}
.layer1 span{
color: #fff;
background: #000cf6;
}
.layer2{
background: rgba(255, 0, 0, 0.4);
}
<div class="container_row">
<div class="layer1">
<span>Lorem ipsum...<br>Test test</span>
</div>
<div class="layer2">
More lorem ipsum...
</div>
</div>
<div class="container_row">
...same HTML as above. This one should never overlap the .container_row above.
</div>
First of all, you really should be including the position on absolutely positioned elements or you will come across odd and confusing behavior; you probably want to add top: 0; left: 0 to the CSS for both of your absolutely positioned elements. You'll also want to have position: relative on .container_row if you want the absolutely positioned elements to be positioned with respect to their parent rather than the document's body:
If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed' ...
Your problem is that position: absolute removes elements from the normal flow:
It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants. However, the contents of an absolutely positioned element do not flow around any other boxes.
This means that absolutely positioned elements have no effect whatsoever on their parent element's size and your first <div class="container_row"> will have a height of zero.
So you can't do what you're trying to do with absolutely positioned elements unless you know how tall they're going to be (or, equivalently, you can specify their height). If you can specify the heights then you can put the same heights on the .container_row and everything will line up; you could also put a margin-top on the second .container_row to leave room for the absolutely positioned elements. For example:
http://jsfiddle.net/ambiguous/zVBDc/
Here's another solution using display: flex instead of position: absolute or display: grid.
.container_row{
display: flex;
}
.layer1 {
width: 100%;
background-color: rgba(255,0,0,0.5); /* red */
}
.layer2{
width: 100%;
margin-left: -100%;
background-color: rgba(0,0,255,0.5); /* blue */
}
<div class="container_row">
<div class="layer1">
<span>Lorem ipsum...</span>
</div>
<div class="layer2">
More lorem ipsum...
</div>
</div>
<div class="container_row">
...same HTML as above. This one should never overlap the .container_row above.
</div>
Great answer, "mu is too short".
I was seeking the exact same thing, and after reading your post I found a solution that fitted my problem.
I was having two elements of the exact same size and wanted to stack them.
As each have same size, what I could do was to make
position: absolute;
top: 0px;
left: 0px;
on only the last element. This way the first element is inserted correctly, "pushing" the parents height, and the second element is placed on top.
Hopes this helps other people trying to stacking 2+ elements with same (unknown) height.
Here's some reusable css that will preserve the height of each element without using position: absolute:
.stack {
display: grid;
}
.stack > * {
grid-row: 1;
grid-column: 1;
}
The first element in your stack is the background, and the second is the foreground.
I had to set
Container_height = Element1_height = Element2_height
.Container {
position: relative;
}
.ElementOne, .Container ,.ElementTwo{
width: 283px;
height: 71px;
}
.ElementOne {
position:absolute;
}
.ElementTwo{
position:absolute;
}
Use can use z-index to set which one to be on top.
Due to absolute positioning removing the elements from the document flow position: absolute is not the right tool for the job. Depending on the exact layout you want to create you will be successful using negative margins, position:relative or maybe even transform: translate.
Show us a sample of what you want to do we can help you better.
Of course, the problem is all about getting your height back. But how can you do that if you don't know the height ahead of time? Well, if you know what aspect ratio you want to give the container (and keep it responsive), you can get your height back by adding padding to another child of the container, expressed as a percentage.
You can even add a dummy div to the container and set something like padding-top: 56.25% to give the dummy element a height that is a proportion of the container's width. This will push out the container and give it an aspect ratio, in this case 16:9 (56.25%).
Padding and margin use the percentage of the width, that's really the trick here.
After much testing, I have verified that the original question is already right; missing just a couple of settings:
the container_row MUST have position: relative;
the children (...), MUST have position: absolute; left:0;
to make sure the children (...) align exactly over each other, the
container_row should have additional styling:
height:x; line-height:x; vertical-align:middle;
text-align:center; could, also, help.
If you go to this site: http://www.marketwatch.com/story/social-networking-for-social-smokers-2011-05-11 and go into the styles and change <div id="blanket"></div> to having a position of static, and then add a wrapper outside of it (or on the body) put position:relative on it, the page changes drastically (the header basically overlaps the content area at that point.
Everything I know about positioning tells me this shouldn't be happening, but I can't quite figure out why. I wasn't able to find anything in the CSS to cause this behavior as well. Anyone have any ideas?
Edit: This isn't related to my job or anything but my friend brought it to my attention and I thought it was a brain tickler.
I've tried doing this:
<body>
<div style="position: relative;">
<div style="position: static;">
<div id="blanket">...</div>
</div>
</div>
</body>
And this doesn't cause the problem, so there is clearly something on that page, but I can't figure it out. It does this in chrome/FF/IE.
Try inspecting the elements in the header. You will see the following style rules on the div#topchrome element:
position: absolute;
top: 0;
width: 981px;
z-index: 10000;
The position on this element (absolute, with top: 0) causes it to be pushed to the very top of the page (default, unmodified behavior). If you change body to have position: relative;, you have basically told #topchrome to be "absolute, but relative to where body is." So now, #topchrome is actually at the top of body, which is the very top of the page. Even so, that still shouldn't change things. The real culript is the third actor, div#breakingnews, which has the property margin-top: 177px. In the new flow, we have:
body { position: relative; }
div#breakingnews { margin-top: 177px; }
div#chrome
div#topchrome { position: absolute; top: 0; }
So, div#breakingnews is causing the content to be pushed down. Indeed, changing div#blanket to have position: static has nothing to do with it, since it is static (the default) to begin with.
How do you overlap an element over another element that is positioned relatively in Internet Explorer? Z-index doesn't work, it always appears behind the relatively positioned element.
Looks like I'm kidding, but I am not
.myLinkCssClass {
background : url(#);
}
You're not by any chance trying to put something over a combobox (select tag), iframe or flash movie right?
In those cases z-index is a lost cause.
Otherwise what browser version are you using and are you using absolute positioning?
I had a real pain with this problem that this particular workaround wasn't relevant for. It's a little hard to explain so I'll try using code:
<div id="first" style="z-index: 2">In between</div>
<div id="second" style="z-index: 1">In the back
<div id="third" style="z-index: 3">Foreground</div></div>
The problem is that setting the parent's z-index to a higher value would move it to the foreground instead of the back where its supposed to be. I stumbled upon a solution completely by accident: I made a copy of the foreground element (id=third) outside its parent.
<div id="first" style="z-index: 2">In between</div>
<div id="third" style="z-index: 3; visibility:hidden">Foreground</div>
<div id="second" style="z-index: 1">In the back
<div id="third" style="z-index: 3">Foreground</div></div>
Its worth mentioning that in my original code the elements don't have IDs so I don't suffer from 2 elements sharing the same one and invalidating my HTML.
I think its safe to classify this weirdness as another bug that happens to help with the original, but it works, at least for me. Hope somebody finds this useful!
Create and then set an additional transparent background image on the element you want to have on top. For me it finally worked in IE8. SASS:
#galerie-link {
position: absolute;
z-index: 1000;
top: 25px;
left: 40px;
a {
display: block;
width: 185px;
height: 90px;
background-image: url(../images/transparent.png);
}
}
I wanted to note that if you are using IE8 and below, it does not support CSS3 filters. This was my issue.
I was using:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#black00', endColorstr='#black00', GradientType=0);
No matter what I set my position or z-index to, you could not see the other layer because it was causing a complete mask over that layer (instead of going from clear to black and to clear again).
By removing the CSS3 filter for just IE8, I was able to solve my problem.
Hope this helps someone who runs into the same issue.
I had the same problem in an html where many repeated relative positioned divs were blocking absolute positioned div's view. The workaround provided by www.brenelz.com, that I've already used with success wasn't working in this case. So, the following worked for me:
I removed the relative positioning from those divs I've mentioned first, then added a CSS to turn those divs on relative when hover. Let me show you the code:
Before:
DivThatYouMustHover {
height: 300px;
position: relative;
width: 200px;
}
After:
DivThatYouMustHover {
height: 300px;
width: 200px;
}
DivThatYouMustHover:hover {
position:relative;
}
This way the others 'sisters' of that div stay with normal positioning and don't interfere with the layout.
It worked very well for me! I hope it helps you too.