I have read that in order for z-index to take effect, the CSS elements involved need to have "position" attributes. So I have a menu that I would like to appear over an IMG when someone clicks on the menu icon. I have these styles for the menu and the image in the content area ...
.menu-btn div {
position: absolute;
left: 100%;
top: 0%;
padding-right: 8px;
margin-top: -0.50em;
line-height: 1.2;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
#personImgDiv {
position: relative;
z-index: 100;
display: table-cell;
width: 80%;
}
However, when I click on the menu icon, the menu is still appearing behind the image -- https://jsfiddle.net/bdcmka1r/2/ . What else am I missing? How do I get the menu to always appear in front?
This is because you're using the wrong selector. .menu-btn is the button class, and it will only affect this button, also there is no way a button can be treated as a container element such as div, nav, header ..etc. Your correct selector will be nav since your menu contained within nav tags. So, you need to add the position and z-index properties to nav selector instead.
nav {
display: none;
width: 100vw;
padding: 0rem;
background-color: red;
position: absolute;
z-index: 9999;
right: 0%;
top: 100%;
text-align: left;
}
#personImgDiv{
position: relative;
z-index: 100;
}
header{
z-index: 101;
}
I see. you have used z-index:100 in porosinIngDiv and you want to display menu over on image so you have to use z-index more in header then #personImgDiv i have given answer on top it will more clear
Related
website: www.vocabularybuilder.co
I want the logo and the navigation to be clickable, it used to work but i did something and now it doesn't :/
Add z-index: 1 and position: relative for this class.
.site-header__logo {
text-align: center;
margin: auto !important;
max-width: 400px;
font-size: 1.85714em;
top: 0;
height: 90px;
display: table;
z-index: 1;
position: relative;
}
Try adding this to your css:
.nav-bar {
pointer-events:none;
}
// for the 2 links
li a {
pointer-events: auto;
}
Hope it'll work. This was already answered here Click through a DIV to underlying elements. ctto
I think this question is related to Link not working inside floated div but I still can't figure it out.
I have a div as follows:
.fullwidthimage {
width: 100%;
position: relative;
z-index: -1;
}
.imageoverlay {
left: 0;
text-align: center;
position: absolute;
z-index: 1;
top: 15px;
width: 100%;
}
#homepagebutton {
position: absolute;
text-align: center;
z-index: 100;
bottom: 50px;
width: 200px;
height: 60px;
left: 50%;
margin-left: -100px;
font-size: 25px;
border: 1px solid black;
border-radius: 5px;
background-color: orange;
color: black;
text-decoration: none;
}
<div class="fullwidthimage">
<img class="noround imageundertext smallimg" src="http://placehold.it/600x800">
<img class="noround imageundertext midimg" src="http://placehold.it/1000x1000">
<img class="noround imageundertext bigimg" src="http://placehold.it/3200x1300">
<img class="noround imageundertext xlimg" src="http://placehold.it/5000x1500">
<h1 class="imageoverlay">Title Here</h1>
Get Started
</div>
The different images are using a CSS media query to display/hide at different sizes. The whole thing is a full width image with a text title and 'button' (that's actually just a link styled to look like a button) over the top of the image.
Whatever links I put inside that div won't work - the text shows on the page, but nothing happens if you mouse over.
Why?!
Links placed immediately outside of the div on the same page work just fine, so I don't think it's anything to do with other containing divs there.
I'm assuming from that previous question asked that it's something to do with the positioning, but I can't make it work.
Thanks!
If you give a -1 in z-index, it goes behind body. So the whole div.fullwidthimage becomes unclickable or unaccessible. So, give z-index: 1 as the starting point.
.fullwidthimage {
width: 100%;
position: relative;
z-index: 1; /* Change this! */
}
.imageoverlay {
left: 0;
text-align: center;
position: absolute;
z-index: 2; /* Increase this! */
top: 15px;
width: 100%;
}
If we visit link , search for text "Save" using CTRL + F, you can see "Save Design" button is clickable.
We want to move the button to upside, so when we increase value to "bottom:117px;" , then button is not clickable
#aitcg-control-panel .apply-but {
float: right;
margin-right: 0;
position: relative;
bottom: 77px; /* or bottom:117px; or top: -146px; */
left: 400px;
}
Comment or delete all your CSS of this selector #aitcg-control-panel .apply-but and use this CSS fix as:
#aitcg-control-panel {
position: absolute;
right: 110px;
bottom: 143px;
z-index: 1;
}
.product-essential {
position: relative;
}
this will solve your issue.
As instead of moving the child element, moving the parent element in your case will be a more wise decision for future debugging.
Because other elements are not using absolute position property and overlapping this button.
Use z-index
#aitcg-control-panel .apply-but {
float: right;
margin-right: 0;
position: relative;
bottom: 177px;
left: 400px;
z-index: 1;
}
This will bring this button to front.
It is happening because your div with class .product-shop has big width so is over the button. you can change its width using this code and the make margin-top:-50px to button.
#media only screen and (min-width: 1824px)
.product-view .product-shop {
width: 25%;
}
Or change button z-index
#aitcg-control-panel {
z-index: 2;
I had this effect working on a Shopify site I designed about a year ago (http://originalchuck.com/), and then tonight, unbeknownst to me, the client decides to buy a new theme, turn it on and now one of my CSS tricks no longer works. If you go to the three images beneath the two blog posts, you'll see the problem. Roll over them, and the image opacity changes. That's the good news. The bad? Some text in a span is also supposed to appear in the dead center of each image, but now it no longer does. My code is the same as the previous theme, so why isn't it working anymore? Here's my CSS:
span.text-content, span.text-content-bags {
color: #ffffff;
font-size: 30px;
left: 0px;
opacity: 0;
position: absolute;
text-transform: uppercase;
top: 0px;
width: 100%;
}
span.text-content span, div.homepage-bags span.text-content-bags span {
left: 0px;
margin-top: -12px;
position: relative;
text-align: center;
top: 50%;
width: 100%;
}
.homepage-products a:hover span.text-content, .homepage-bags a:hover span.text-content-bags {
opacity: 1;
display: inline-block;
}
Here's a cool trick to center stuff inside a container:
set position: relative on the outer, containing element, and then on the element you want centered, do this:
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: block;
text-align: center;
You also need to set a height and width for the inner element. The units shouldn't matter.
Works in all browsers including at least IE8+. It may even go further back than that.
See this page here:
http://www.blakearchive.org/blake/public/exhibits/canterburySpecial.html
The menu bar is supposed to go above the text and the red and black gallery menu on the right should go over the menu bar and text.
I've set the z-index for the right column (in which the text sits) and the menu bar to 1, and the z-index of the red and black gallery menu to -1. But the divs still still next to each other, rather than on top of each other as they're supposed to.
The relative css is here:
#menu {
width: 100%;
float: left;
border-top: 5px solid #823
z-index: 1;
}
#columns .right {
float: right;
width: 28%;
height: 90%;
overflow-y: auto;
padding-right: 3%;
padding-left: 1%;
padding-top: 1%;
text-align: justify;
z-index: 1;
}
#menubar {
float: right;
width: 18%;
padding-right: 3%;
padding-left: 1%;
z-index: -1;
}
z-index applies to positioned elements.
Positioned elements are defined as elements for which the position property has a value other than static.
static is the default value.
You haven't applied a different position value to any of your elements.
You probably want position: relative;.
The z-index property will only work when there is also a position property applied (not counting position: static;, which is the default).
All of the following will work, according to the spec:
position: fixed;
position: absolute;
position: relative;
position: sticky; /* Limited support, currently in Firefox and Opera */
The only exceptions are within a flex container or a CSS grid.