i have a problem with the position: sticky and z-index
I want my modal in the sticky-element to be overlayed by the overlay.
With position: relative it works: the modal is before the overlay. But when I use Sticky the modal is behind the overlay.
Hope it's understandable what I mean.
Here's the example:
.sticky {
position: sticky; /* <-- dosen't work */
/* position: relative; /* <-- work */
top: 0;
width: 100%;
height: 200vh;
background: red;
}
.modal {
z-index: 1000;
position: fixed;
margin: 0 auto;
width: 200px;
height: 200px;
background: yellow;
margin: 0 auto;
}
.overlay {
z-index: 999;
position: fixed;
width: 100%;
height: 100%;
background: green;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.75;
}
<div class="overlay"></div>
<div class="sticky">
<div class="modal">modal</div>
</div>
When you set position: relative, the .modal element is relative to the body because it has position: fixed. As such, the z-index value of 1000 put it in foreground.
When you use position: sticky, the .sticky element is positionned, with the default z-index value. Therefore, it positions itself in background because .overlay's z-index value of 999. .modal being a child of .sticky, it will never be able to go in front of .overlay.
You must change the structure of your HTML, or simply add a z-index on your .sticky element.
Related
The footer does not show the image above the footer.
Screenshot:
Image is under footer
Source Code
.footer-area {
background-position: center;
position: relative;
z-index: 5; }
.footer-area::before {
position: absolute;
content: '';
bottom: 0;
left: 0;
height: 50pc;
width: 100%;
background-image: url(../images/footer-bg.svg);
background-position: center;
overflow: hidden;
The attribute z-index will not be applied to the pseudo element :before, if you want image in the front layer, you have to apply the z-index in the before element
This is so strange that I can't even replicate the error in jsfiddle despite copy-pasting the code.
Basically I have it like this:
<div class="container">
<div class="absolute-background" />
<div class="where-is-this" />
</div>
With this CSS:
.container {
background: transparent;
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}
.absolute-background {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background: blue;
z-index: 0;
}
.where-is-this {
height: 100px;
width: 100%;
z-index: 1000000;
background: red;
}
This should display a red box at the top of the screen, as it does in this fiddle: https://jsfiddle.net/Lmj6d625/
However, in my actual page (on the same browser) the blue covers EVERYTHING. I can even add new divs below with text and they are completely hidden.
Screenshot:
Where is my div?!
Anyone have any suggestions how to troubleshoot this?
The z-index property only works on elements with a position value other than static (e.g. position: absolute;, position: relative;, or position: fixed).
There is also position: sticky; that is supported in Firefox, is prefixed in Safari, worked for a time in older versions of Chrome under a custom flag, and is under consideration by Microsoft to add to their Edge browser.
Thanks to Evert for this answer
1.) DIV Tags can't be self closing
2.) You need a height for the body tag, otherwise it will have 0 height, and that will also apply to container and .absolute-background, making them invisible.
3.) You need position: absolute or position: relative for the z-index of the red DIV to become effective (fixed would also work, but then it wouldn't scroll with the rest of the page)
html,
body {
height: 100%;
margin: 0;
}
.container {
background: transparent;
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}
.absolute-background {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background: blue;
z-index: 0;
}
.where-is-this {
position: absolute;
height: 100px;
width: 100%;
z-index: 1000000;
background: red;
}
<div class="container">
<div class="absolute-background"></div>
<div class="where-is-this"></div>
</div>
http://lucasdebelder.be/googledoodle/
I want to have the planet (bottom image) on top of the top image (the blue background/space). I have a main div class:"center" set on 'position: absolute' and around both of those images is separately a div wrapped with position: relative; but somehow they don't want to go and sit on top of each other, I've also tried it with z-index but that doesn't work either.
Thanks in advance.
Use these properties the planeet_achtergrond class:
.planeet_achtergrond{
position: absolute;
bottom: 150px;
}
I would recommend nesting the two images in a div then adding a class to each image. Then use margin: 0 auto to center the div to the page. This is my solution:
#googledoodle {
position: relative;
top: 0;
left: 0;
height:512px;
width:900px;
margin: 0 auto;
overflow: hidden;
}
.galaxy {
position: relative;
top: 0;
left: 0;
}
.planet {
position: absolute;
top: 380px;
left: 0px;
}
<div id="googledoodle">
<img src="http://lucasdebelder.be/googledoodle/images/galaxy.png" width="900" class="galaxy">
<img src="http://lucasdebelder.be/googledoodle/images/planeet.png" width="950" class="planet">
</div>
i changed all css. Here sample:
.center {
position: relative;
text-align: center;
width: 900px;
margin: auto;
overflow: hidden;
height: 500px;
}
.space_achtergrond {
width: 100%;
z-index: 0;
position: absolute;
height: auto;
bottom: 0;
}
.planeet_achtergrond {
width: 100%;
height: auto;
z-index: 100;
position: absolute;
bottom: -15px;
}
form {
position: absolute;
bottom: 15px;
z-index: 999;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
use overflow:hidden outer div.
if you want place divs inside a div with position:absolute, use position:relative for parent div.
if you want to stick a div bottom, use only bottom:0
I've understood that z-index needs that the div is positioned.
Then, I don't know why it doesn't work in my case :
html {
height: 100%;
}
body {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#signDiv {
position: relative;
z-index: -1;
width: 100%;
height: 100%;
}
#infoDiv {
position: relative;
width: 100%;
height: 100%;
z-index: 10;
}
<body>
<div id="signDiv">
...
</div>
<div id="infoDiv">
...
</div>
</body>
The two divs are not superposed, a solution ?
Thank you very much
You're sort of right that declaring a position on an element will make its z-index property kick in. But in your example, because of the order of your elements in the HTML, infoDiv will already be on top by default in terms of z-index. You don't even need z-index.
What you need is to set their positions to absolute instead of relative.
Something like that: http://codepen.io/memoblue/pen/xOBBxK
html {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
}
#signDiv {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
#infoDiv {
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
}
<body>
<div id="signDiv">
...1
</div>
<div id="infoDiv">
...2
</div>
</body>
I'm trying to create overlay for modal window.
Here is my css
#overlay {
position: absolute;
background: #000;
width: 100%;
height: 100%;
z-index: 9800;
}
The problem is that layer does not cover entire page. When I scroll down overlay disappear.
What I miss ?
Use fixed positioning:
position: fixed;
You should have:
#overlay {
position: fixed;
background: #000;
width: 100%;
height: 100%;
z-index: 9800;
}
Since IE6 doesn't have support for position: fixed there is a solution I used in Modalbox:
#overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 9999;
border: 0;
background-color: #000!important;
}
#overlay[id] { position: fixed; }
In this case the IE will take a position: absolute style but every modern browser the second rule with position: fixed.
For IE you should use some additional CSS to prevent it from being scrollable. I managed it by setting following rules on body:
{
width: 100%;
height: 100%;
overflow: hidden;
}
Better if you do it in an addition class which will be toggled on body element when you show your overlay (in JS).
Add top:0, left:0 and position:fixed to the #overlay. U may add opacity css too .
#overlay {
position: fixed;
background-color: #000;
width: 100%;
height: 100%;
z-index: 9800;
top:0;
left:0;
opacity:0.5;
}