I'm trying to position image on top of colored background as shown in attached image.
I've tried setting it's Z-index higher than other elements. Didn't worked.
Set other elements z-index lower than image Z-index. Didn't worked.
Here is the webpage: https://buyshroomsonline.ca/about/
This is the ID of the image (Girls with Phone). As you can see What I'm trying to make it come on top of all other elements.
#ctrlimg{
position: relative;
z-index: 10;
top:-160px;}
I've also tried setting higher Z-index. Please take a look and help me find what I am missing.
Thanks
Remove overflow:hidden from .vc_row[data-vc-full-width] but make sure do not remove directly from .vc_row as it may have a impact on other sections. so inherit or concatenate .vc_row[data-vc-full-width] with your custom class.
For Example
.yourClass.vc_row[data-vc-full-width]
Related
Jsfiddle
So as seen in the Jsfiddle (You may need to hold ctrl + a) I'm trying to achieve having the div on top of the image, but I tried using a z-index for both the div and the image, and even put the image in a div by itself, but it still hasn't worked.
I was wondering if this is possible in CSS.
The reason is that by default elements are positions statically which means that z-indexes do not apply. Change to a different position such as relative or absolute will make z-index apply.
https://developer.mozilla.org/en/docs/Web/CSS/position#Values
I'm having trouble with the order of layered DIV elements. I have a DIV .lens-flare that's at the bottom of the hierarchy in HTML. Yet when I transform: translate the position so it encompasses the entire parent DIV, it shows above elements that are above it in the hierarchy.
So I tried setting z-indexes, and then turned my translate into translate3d. Still I'm not able to get .lens-flare underneath .top-nav-bar, .nav-bar, or .cta.
Currently I have a pointer-events: none applied so I can at least click on the things underneath. But how can i actually move the .lens-flare layer under everything else successfully?
Here's my CodePen for the project
Elements rendered later are considered being closer to the screen than the elements rendered before them.
Z-index is the answer if you want to change this, you just need to remember z-index works only with elements that are positioned.
.lens-flare
position: relative
z-index: 1
.nav-bar, .top-nav-bar, .cta
position: relative
z-index: 2
Your corrected codepen: http://codepen.io/sEvher/pen/doyWoW
So I know there are a plethora of questions about position fixed/relative/absolute in relation with z-index, but I still couldn't figure out my question using those.
Essentially I have a header that is fixed. It works perfectly fine, everything goes behind it when scrolling down the page.
I recently wanted to add links to div ids, but in order to account for the header, I had to add the following code where link is the parent element, and then linkTo is the class of something with an ID that we actually link to. This functionality works completely, providing the correct offset so that the header is above the div we want.
.link {position: relative;}
.linkTo {position: absolute; top: -80px;}
The problem with this, is that for some reason now my div is behind everything on the page. I can still see it but the text and images are in front.
I've tried adding z-index to my header (of like 9999) but it isn't working. I don't understand why adding position relative would mess up the order of how things are displayed.
I'd like to provide an example, but my code is rather large. If this isn't enough I can try to make a jfiddle later.
Add position: relative; z-index:9999 to the parent element it will keep this element stick inside the menu.
As Ganesh said, adding position: relative to the parent element of the header was the starting step. After that adding z-index to the same parent element fixed the problem completely.
Check for a lower z-index on a parent element, it appears to override the z-index of children.
I've run into z-index issues in the past with drop down menus and jquery UI tabs. I thought it had something to do with the stacking effects created us rules like opacity or transition, but for me the problem was a parent element having a lower z-index than a child element.
I tried to use HTML+CSS to generate simple inline info popups, yet I was not able to make it work as intended. In particular, the popup div container ignores my max-width and z-index settings.
I posted a small demonstration on jsfiddle.
Can someone please enlighten me? What am I missing? Many thanks in advance!
You need to set positions to absolute/relative/fixed in order for z-index to work http://jsfiddle.net/NMh8j/12/
If you change .faq>.body to position:fixed, the 240px width is observed, and the top : 12px is moving the popup over the underlying ?. You can then drop the left-20px as well as it will center itself.
jsFiddle update
Your .head hasn't any position specified, change your CSS to :
.faq:hover>.head {
position: relative;
border-color:#cccccc;
border-bottom-color:#ff0000;
z-index:100;
}
z-index need the position property to be fixed (fixed, absolute, relative.. but not static, which is the default value)
Open up http://irule.at/quovadis, and it will show you a regular theme. The problem is that the div photos is not showing up. It's most likely hiding behind body/html because of the z-index, but I want them to show behind the divs in the middle. How do I fix this?
It looks like you're using a negative z-index for photos. Instead of that, use a positive or 0 index, and give the other elements a higher index. Also remember that in order for z-index to work the elements should have position: relative. I got photos to show up by having it z-index 1, having header z-index 2 and position relative.
You've had an answer, but thought I'd chip in a little to clear things up.
Z-indexing requires an element to be positioned, not necessarily relative or absolute as you've already figured out, but fixed is also an option.