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
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
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.
The problem is quite weird and hence I took help of images to explain it.
Image 1: (Refer below image) Here the side bar doesn't have any position explicitly set and popup has
.popup{
position: absolute;
z-index: 900100;
}
My pop up is positioned over side bar and content section, so far so good.
Image 2: On content scroll, I make my side bar to be positioned fixed so that side bar doesn't scroll when only content in being scrolled. Hence side bar gets below styles.
.sideBar {
position: fixed;
top: 100px
}
Now, when the pop up is opened, it hides behind the content section, as shown in below image.
I tried changing positions on elements etc but nothing seems to help. Please provide some approach. I don't want popup to hide behind the content section.
Without your code or a fiddle it's difficult, however please make sure your popup and sidebar have a higher z-index than the content section.
How I fixed it:
z-index of sidebar was made greater than z-index of content. (Credits - #Deathstorm)
Added position: fixed to my pop up div.
I'm designing a portfolio website for a friend, using the KOKEN CMS. The supplied theme is nice but needs some changes. It places all portfolio pictures in a scrollable horizontal band of divs, preceded by a div with intro text. However the theme doesn't allow to have the intro text stay in place, and the following divs scrolling.
Please take a look at http://www.shakkei.com/klanten/hansmaes/projecten/m-r-houthalen/
So the text block
"TWEE APPARTEMENTEN
aard: nieuwbouw
plaats: Houthalen
ontwerp: 2005
realisatie: 2015"
needs to stay fixed, the pictures should scroll.
Can i have some advice on how to alter the CSS (z-index?,...) to manage this?
Many thanks!
you can take the div called "wrap" and add "positio:fix" to it and play around to get it the right top and left values; also you need to choose the highest z-index in order to overlap everything. i tried it on google chrome inspect element and these values seems to be fine "position:fixed;top:100px;left:0px;z-index:9999999999"
Used to this css
#lane.cell > .wrap{
position: fixed;
top: 102px;
z-index: 2;
left: 0;
width: 135px;
}
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)