On this website - Uggerhøj Improve, I would like the little div in bottom right corner (the one that says Fotograf: Erik Refner) to only appear on the background image. When I scroll down and get past the image to the black background, the text should disappear behind the background.
I've tried z-index: -1 but I'm not sure how to use the z-index properly. Can you help me?
The z-index of the background should be lower than the z-index of the bottom right div, and the z-index of the bottom right div should be greater than the z-index of the background
So something like this?
section
{
z-index: 6;
}
.fotograf
{
z-index: 5;
}
Note that the numbers I am using here are just examples.
You need to set the position property to a value other than static in order for the z-index to be considered. Also, the z-index of the element that should appear on top should be higher than the z-index of the element that should be hidden.
In your case, the div on the bottom (Fotograf) should have a z-index of, say, 2. The background image should have a z-index of 1, so that it goes behind and the one with the black background should have a z-index of 3, so that it always appears on top.
Related
I have created hover effect of two images. image1 changes to image2 on hover in div"img3". Both images are in div"img3" and image2 position is absolute. Now my Navbar or header (section "header") position is fixed. So whenever I hover on image1 image2 comes on top of the Navbar as shown in the image2 below.
Image1
Image2
Add this to your navbar
z-index: 100;
because of this whatever u add will not poke over navbar.
The answer of DarkForest is correct.
Just to explain a bit further - the attribute of z-index which
defines layering of site elements is applicable to both position:fixed and position:absolute. The default behavior of layering is hierarchical, which means, that the element which is further in the code will initialy overlay the first element.
That is unless you define attribute z-index to one or both of these elements.
the higher the number, the more upper layer of display.
Usually, you want to assign as high z-index as you can to the fixed navbar as you don't really want anything to display over it (unless it's an element inside of it)
To summarize:
.navbar {
/*dimensions and other styles*/
position:fixed;
z-index: 100;
}
should do the trick
I want to hide two images (partially) behind my center/main div ,just like it is shown on the picture i included [the images are blue and the center div is brown,the darker blue color is the part of the image that is supposed to be hiden behind the div].The two images are included in the HTML (as tags).They have to be (as they currently are) part of the HTML and not "injected" via CSS.
The positining of the images isn't a problem,but the "overlaping/hiding" is.I have tried so many times via z-index but to no avail.
Can anyone help ?
link to picture. http://i.stack.imgur.com/ZCKdt.jpg
If you're looking to partially hide them behind the main div, you can either set the parent container (your body tag, if nothing else contains the main div) and add your images in css using background-image: url(image1.png), url(image2.png); and then background-position: left center, right center;. You can also use pixels or percentage to determine the positioning of the horizontal and vertical, respectively. That way, you don't have to bother with the z-index.
However, neither this, nor z-index will solve your other problem of having the images partially visible. For this, you can set the colour and opacity of your main div's background with background: rgba(0, 0, 0, 0);, where the first three zeros can be any number from 0 to 255 which represents red, green, and blue, and the fourth zero represents any number from 0 to 1 (as decimals) which determines opacity. The lower the number, the more transparent the background is. The more transparent it is, the more you can see the images behind it.
Alternatively, you can use opacity: 0; in the same way as above
Without seeing your HTML/CSS, it's going to be harder to diagnose the problem, but it sounds like you're confusing body elements with positioned elements. Z-index won't work for body elements, so you should try to place the blue images into a div and pull that div behind your brown div.
You can find more info and a jsfiddle example at this older post: Hiding a image under the div
I have three z-index level in my page
z-index: 1 for the div in position: fixed with the image positioned as background
z-index: 2 for the div sliding box in position: absolute which falls down if you click over the producto link (click twice in the producto link in this example)
z-index: 3 for the the div in position: relative with my header and content
I want to keep the space in z-index: 2 with the image in background exactly till the same point where my sliding box falls down if you click over the Producto link but then i want again my content in z-index:3. in order to keep the div in z-index: 1 as a small window with my image inside.
I am struggling to achieve that, i think it's a very stupid think at this stage.
Hope the explanation is clear, otherwise tell me what's unclear
found out the issue, i was applying twice the background-color in div z-index 3, that's why i didnt see the div in z-indez: 1
On my site : Dev.stevehamber.com
I am trying to get the image "New Page" (currently behind the slider) to be positioned outside it's current DIV, overlapping the top right hand corner, but so that it also moves with the Auto margin of the main content. Can't seem to figure out how, with out it being either behind something or not following the auto margin of the container.
I have also had problems with the :hover attribute. Experimenting with fixed position Divs I have noticed the image/background doesn't change on the bottom right hand corner of the fixed "F", is this something to do with positioning too? :/
I tried Googling this but couldn't explain myself in 1 sentence, so I hope this makes sense. Ha!
Thanks.
In your CSS, add z-index, like this:
img.newpage {
position: absolute;
right: 1px;
z-index: 2;
}
Give the F a high z-index to make it be on top
Put the newpage.png in a div that's on top of the slider div. Put both of those div's inside another div; assign the css auto-margin attributes to this parent div.
So something like
<div id="slider">
<div id="slidercontent"><!-- in here, put the slider -->
</div>
<div id="newpage"><!-- make newpage.png the background image of this-->
</div>
</div>
As for the hover; please explain a bit more thoroughly, it seems to work fine with me. You mean the facebook button right? (its positioned top-left in my FF btw)
I'm trying to add a sidebar to my page. The main body container on the page has a box-shadow, so I want the sidebar to appear as though it's coming out from underneath the container so the shadow will be on top of it. I made my sidebar div a direct child of the body container (which has position: relative), and set it's position to absolute, then positioned it using the top and right position values. I got it in the right place, then applied a negative z-index so that it would be under the body. The problem is, this is making any links that I put in the sidebar unclickable in all but IE9. I don't know how else I can accomplish this without knocking out the links. Any ideas?
I would post a link to a page showing an example, but I'm actively making changes to it, so by the time you clicked it you probably wouldn't see what I'm going for. I'll try to explain better.
The body container is 720px wide and has an auto margin so that it appears centered in the page. It is positioned relative.
The sidebar is a direct child (the first child) of the body container. It has a fixed width, position absolute, padding, etc. and has a top and right position applied, along with a z-index of -100.
Here's a link:
http://reachchallenges.infectionist.com
You can remove the negative z-index and give an inner shadow to the sidebar that is the same as the outer shadow of the .body element.
You´d have to try it to see how it affects the border of the sidebar.
I don't fully understand what effect is desired but maybe this barebones fiddle can give some hints as for how to approach problems of such kind.
jsfiddle
The way to get links to work is to toggle z-index back to a positive number. Your CSS will look like:
.z-index1{
z-index: 1 !important;
}
and your JS should be:
$("#div-on-top").click(function(){
$("#div-on-bottom").toggleClass("margin");
$("#div-on-bottom").toggleClass("z-index1");
});
Clicking on #div-on-top will move it out of the way revealing #div-on-bottom and it will also bring #div-on-bottom to the top, making links clickable.
I also applied shadow to the #div-on-top and it looked ok (to me; see jsfiddle).