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>
Related
I've seen that pattern for centering an element on a website in the code of someone else:
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<img src="https://placebear.com/200/300" alt="picture-one" />
It works fine. No doubt !
But I can not imagine what the CSS-code actually does.
I've seen similar code in which positioning was used to extend an child element to the size of it's parent.
#child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: lime;
}
#wrap {
width: 100%;
height: 800px;
}
<div id="wrap">
<div id="child"></div>
</div>
But here it makes no sense to me.
Can someone explain me how these first shown technique work?
What the single properties do and how it finally accomplishes it's result?
I would appreciate it.
#child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100px;
width: 250px;
margin: auto;
background-color: lime;
}
#wrap {
width: 100%;
height: 800px;
}
<div id="wrap">
<div id="child"></div>
</div>
It's because the image has its default width and height.
When you use
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
Element would get the window size and position the element inside of it.
#child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100px;
width: 250px;
margin: auto;
background-color: lime;
}
#wrap {
width: 100%;
height: 800px;
position: relative;
}
<div id="wrap">
<div id="child"></div>
</div>
So, if you put position relative to #wrap, the position absolute #child will adjust to the parent.
Hope it helps! Cheers!
position: absolute allows you to set the distance of you element from the top, bottom, right and left from the edges of the whole page.
In the second example you have shown even thought the #wrap is set to a height of 800px the #child distance from each side of the page is set to be 0. So therefore it covers the whole page!
Hope this helped!
#inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100px;
width: 250px;
margin: auto;
background-color: #000; border:1px solid #fff;
}
#container {
width: 100%;
height: 800px;
}
<div id="container">
<div id="inner"></div>
</div>
I can't seem to figure out why my project-img-text-container is falling outside of its parent div project-image-container and project-img-main. I added in project-image-container to combat this issue, but it did nothing and I am drawing a blank. I have both containers set to relative, so not sure why project-img-text-container is falling out when it is set to absolute.
Anyone see why?
#project-img-main {
position: relative;
margin: 0;
width: 100%;
height: auto;
}
#project-image-container {
width: 100%;
height: 100%;
position: relative;
}
#project-img-window {
max-height: 700px;
/*background: rgba(0,0,0,0);*/
width: 100%;
}
#project-img-text-container {
background: rgba(0,0,0,.7);
position: absolute;
width: 33%;
height: 100%;
left: 60%;
z-index: 99;
}
#project-img-text {
color: #FFF;
font-size: 2em;
}
<div id="project-img-main">
<div id="project-image-container"><img src="http://optimumwebdesigns.com/eslich/images/projects/project-main3.jpg" id="project-img-window" alt="Demolition and Wrecking Projects">
<div id="project-img-text-container">
<div id="project-img-text">Test</div>
</div>
</div>
</div>
#project-img-text-container {
top:0;
}
When setting something as position absolute, you need to specify it's position within the document or containing element.
If you are not going to use a defined height, position: relative alone can not hold the element within. Since project-img-text-container position property value is absolute, you need to add top:0 to its block of CSS.
#project-img-main {
position: relative;
margin: 0;
width: 100%;
height: auto;
}
#project-image-container {
width: 100%;
height: 100%;
position: relative;
}
#project-img-window {
max-height: 700px;
/*background: rgba(0,0,0,0);*/
width: 100%;
}
#project-img-text-container {
background: rgba(0,0,0,.7);
position: absolute;
width: 33%;
height: 100%;
top: 0; /* This has to be 0 to bring it up to the top */
left: 60%;
z-index: 99;
}
#project-img-text {
color: #FFF;
font-size: 2em;
}
<div id="project-img-main">
<div id="project-image-container"><img src="http://optimumwebdesigns.com/eslich/images/projects/project-main3.jpg" id="project-img-window" alt="Demolition and Wrecking Projects">
<div id="project-img-text-container">
<div id="project-img-text">Test</div>
</div>
</div>
</div>
Try adding
img{
position: absolute;
}
Working fiddle: https://jsfiddle.net/rittamdebnath/hwj28zm3/
I am trying to create responsive behavior with the fixed image on top and would like to achieve that the following content snapped to the bottom of the div that contains the image, but the image with position: fixed gives no height to the div, can you please point me what is wrong and if there is another way to achieve that?
.slider {
height: auto;
width: 100%;
}
.image {
width: 100%;
position: fixed;
z-index: -1;
top: 0;
}
.content {
height: 1100px;
background-color: black;
width: 100%;
z-index: 100;
margin-top: 350px;
position: relative;
}
<div class='slider'>
<img class='image' src='http://s2.postimg.org/vmnzo6e0p/top.jpg'>
</div>
<div class='content'>
</div>
Diagram of expierience that I would like to achieve.
Maybe you're looking for something like this using JQuery: https://jsfiddle.net/9hmyr40w/
CSS:
body{
margin: 0px;
}
.slider {
height: auto;
width: 100%;
}
.image {
width: 100%;
position: fixed;
z-index: -1;
top: 0;
}
.content {
height: 1100px;
background-color: black;
width: 100%;
z-index: 100;
position: relative;
}
JQuery:
$(window).on("load resize", function() {
var imageBottom = $(".image").height() - 15
$(".content").css("top",imageBottom)
})
I'm trying to create some static content using a div with position: fixed and then allow a solid div with a background-color to scroll over it and hide the static text below.
HTML:
<div class="container">
<div class="static-background">
<p>Why can I see this through the yellow div?</p>
<p> this should be clickable
</p>
</div>
<div class="overlay"></div>
</div>
CSS:
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.static-background {
position: fixed;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
}
But the yellow div just shows the text through from the fixed background.
Why is this?
By setting z-index: -1; in .static-background i get the desired behaviour, except that the link is no longer clickable and the text is not selectable.
How do I make the background of .overlay hide the fixed elements behind while still allowing interaction (until hidden)?
Fiddle here.
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.static-background {
position: fixed;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
}
<div class="container">
<div class="static-background">
<p>Why can I see this through the yellow div?</p>
<p> this should be clickable
</p>
</div>
<div class="overlay"></div>
</div>
When you give the element .static-background a negative z-index, it is being placed behind the parent .container element, which is why the element is unclickable.
To work arond this, you need to give the parent element, .container, a z-index to establish a stacking context between the elements.
In this case, you can simply give it a z-index of 1.
Updated Example
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 1; /* Added */
}
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.static-background {
position: fixed;
z-index: -1;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
}
<div class="container">
<div class="static-background">
<p>Some text</p>
<p>this should be clickable</p>
</div>
<div class="overlay"></div>
</div>
As an alternative, you could also just give the element .overlay a z-index of 1, and remove the z-indexs from the other elements. (example)
You might want to add some z-index to your elements:
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.static-background {
position: fixed;
z-index: 99;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
position: relative;
z-index: 100;
}
Change your css to this...
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.static-background {
position: fixed;
z-index:4;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
z-index:5;
position:relative;
}
Working JSFiddle http://jsfiddle.net/DivakarDass/mcdbopj6/3/
I have a #background and a #content box. The #background is supposed to be at top, and #content box have a margin-top of X pixels.
Now, the problem is that even though #background have the position: absolute; property, it follows the #contents margin.
Why is the #background affected?
HTML
<div id="background"></div>
<div id="content">Content</div>
CSS
#content {
width: 200px;
margin: auto;
margin-top: 150px;
background-color: Coral;
}
#background {
width: 100%;
height: 500px;
position: absolute;
background-color: AntiqueWhite;
z-index: -1;
}
Reproduced problem http://jsfiddle.net/GeU35/
So you just needed to set its position via top: 0;. Remember you can add left: 0; to make it sit to the left as well. Also anyway you want. bottom: 0; and right: 0;.
CSS:
#background {
width: 100%;
height: 500px;
position: absolute;
top: 0;
left: 0;
background-color: AntiqueWhite;
z-index: -1;
}
DEMO HERE
Not quite sure if I understand, but will doing this fix your issue? Ultimately setting top: 0 and left: 0 to #background
#background {
width: 100%;
height: 500px;
position: absolute;
top: 0;
left: 0;
background-color: AntiqueWhite;
z-index: -1;
}
It's an interesting effect, but ultimately you have specified an absolute position, then not given any position information. I believe that's why it misbehaved. As mentioned in other answers simply setting something like top:0px solves it readily.