Here is my work I have done so far: Social Network
If in the class .cover-profile I change the value of z-index then the link stop working for the class .navigation.
I have fixed the navbar at the top and want other things to be behind the navbar when scrolling.
try to use as
.navbar {
z-index: 2;
}
.cover-profile {
z-index: 1;
}
What is .cover-profile?
I delete z-index from .cover-profile, and add z-index to navbar
.navbar {
display: inline-block;
top: 0;
width: 100%;
height: 70px;
background-color: #eb3b5a;
position: fixed;
z-index: 1;
}
You can check it here
https://codepen.io/anon/pen/mKbVaE
That's because you place the whole .cover-profile class behind the <body> of your page. That's why it's not working.
Please check the below link
https://codepen.io/anon/pen/mKbVgr
Issue is here .cover-profile { z-index: -1; }
Regarding the z-index property, it specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
In this case "cover-profile" has a z-index of -1, it will be placed behind your body.
Related
I'm currently modifying a Xenforo theme for my website and I'm having trouble with my header bar after I downloaded a new theme.
http://www.ausfifa.com/forums/index.php?forums/head-to-head.2/
If you scroll down the page, you'll notice that certain elements such as the search bar, breadcrumb arrows and mini avatars are appearing above my header bar.
I'm not sure why this is happening as I've set the header bar's z-index to 9999 and its position is fixed (when you scroll down after a certain point, javascript sets position = fixed). All the elements that are overlapping it have z-indices that are lower than 9999. The odd thing is, this wasn't an issue on my older theme and I never modified any CSS for it to start doing this.
This is the div which contains my header:
#header-menu-cont {
font-family: DIN-Cond;
font-size: 15pt;
min-width: 1000px;
float: left;
width: 100%;
height: 52px;
background: #333333;
z-index: 9999;
position: relative;
}
This is the mini avatar that overlaps my header:
.discussionListItem .posterAvatar .miniMe {
bottom: 1px;
left: 29px;
padding: 0;
position: absolute;
z-index: 10;
}
The search bar that overlaps my header:
#searchBar {
position: relative;
z-index: 52;
}
I've also tried setting a high z-index to all of the elements inside my header bar but it makes no difference.
Feel free to inspect any of the HTML in my website if you'd like to get more information.
Any help would be greatly appreciated. Thanks.
When setting Z-index you need to do this on the containing element not the ones inside it.
In your case the #headerMover div has z-index:1; applied to it.
If you take this out of your CSS or add a higher z-index on #headerMover it solves your problem.
#headerMover, .footer, .footerLegal {
z-index: 1000;
}
You need to give the parent/container the z-index, not the elements inside it.
I'm trying to layer 2 div's so that the content of one is above another, and the other has an opacity setting to make it translucent. However, no matter which way around I put the HTML for the layers the translucent layer is always above the content. This is the way I would assume to be correct in HTML ordering:
<div id="translucent"></div>
<div id="content">...</div>
However it doesn't seem to be working - The basic styling I'm using to overlap the layers is here - This works to put one over the other, but the translucent one seems to stay above the other one
<style>
#content
{
margin-top:-525px;
}
#translucent
{
height:525px;
opacity:0.8;
}
</style>
Any Ideas?
Why don't you use position and z-indexes? It should work like this:
#content {
margin-top:-525px;
// positioning something allows you to do more accurate placements
position: relative;
// adding a z-index allows you to play with the layers (because... z-axis.)
z-index: 1;
}
#translucent {
height:525px;
opacity:0.8;
position: relative;
z-index: 0;
}
Basically, the HTML DOM works as following: if it's later in the DOM, it is on top of items earlier in the DOM. Turning the opacity down makes the element transparent, but not non-existent. The best way to do this is add z-index and a position, or just use display: block; and display: none; To hide one of yours DIVs (but you want the transparency, so I guess thats not an option).
However if you'd use position: absolute; you could place the elements in the same place without doing the margin. Then wrap it in another element (say #wrapper) and then you can move both boxes at the same time. Add a width and height of 100% for both boxes and you can use the wrapper to define both boxes' height and width and the same time! Ahh. CSS Magic.
<div id="wrapper">
<div id="content">...</div>
<div id="translucent"></div>
</div>
Heres the CSS:
#wrapper {
position: relative;
}
#content {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#translucent {
height:525px;
opacity:0.8;
position: absolute;
left: 0;
top: 0;
z-index: 0;
}
I've used flexbox to set up a stick footer, as the size of my footer may vary in size from page to page. That's all working, but now for some reason the footer is non-interactive!
Page here: http://teamcherry.com.au/about/
What I mean is, the text can't be highlighted, the link can't be clicked, and the text boxes can't be highlighted either. I've played around with it but have no idea what the cause is.
You need to change z-index: -1; on your footer to z-index: 0; or you can remove it completely :)
Your z-index to your footer is -1 make the following changes
footer {
width: 100%;
background-color: #2d2d2d;
color: #ecebe1;
z-index: 0;/*changed*/
}
OR
footer {
width: 100%;
background-color: #2d2d2d;
color: #ecebe1;
/*z-index: 0;removed*/
}
Your footer is not working because you are using z-index negative value. Either remove it or give a positive value.
footer {
background-color: #2d2d2d;
color: #ecebe1;
width: 100%;
z-index: -1; /*Remove this*/
}
Note: Z-index only works when you give position relative or
absolute;
Try putting z-index on the footer div.
I've got a problem. I have a drop down menu, but the drop down list is always one layer behind the body although the z-index of menu is set to 999 and z index of body set to -999
Please chceck http://www.w3dominik.com/x/finemoney/ (the menu on top right, it says dropdown and should have 2 options, only 1 is now visible)
Thanks for help
This will fix it for you:
#header_wrap {
position: relative;
z-index: 10;
}
You often need to set the z-index on the outermost parent (particularly in older versions of IE).
Just add position: relative, z-index won't work without position.
header ul {
display: inline-block;
float: right;
height: 30px;
z-index: 999;
position: relative;
}
I created a form for a Wordpress site http://www.bassetandbeagle.org/adoptionapplication/ and in the CSS code I put div position: absolute, so that the form would scale on mobile devices.
#formContainer {
min-width: 950px;
max-width: 950px;
padding: 10px;
position: absolute;
z-index: -1; }
Now the drop-down menus, above the form, are hidden behind it.
I attempted to set a higher z-index for the menu:
.nav-menu{
position: relative;
z-index: 1; }
But this had no apparent effect. I tried 1, 100, 1000... nada
I was able to get the drop-downs to show up again, by changing the .nav-menu to position: absolute. Unfortunately, this screwed up the positioning of the menus on the page.
I am pretty sure I am on the right track with the z-index property, based upon the other posts I have read. So, what am I doing wrong here?
Thx
Here is the solution of your problem -
CSS:
style.css line: 1431
.site {
margin: 0 auto;
max-width: 68.5714rem;
/*overflow: hidden;*/ /* remove this css rule and you will see the dropdown menu*/
}
Note: Check you site that where your .site class is applying and make the changes in css as per need.
Screen Shot:
Remove position: absolute from #formContainer.