I have a problem at the css levels because I am testing the code via this site:
https://codepen.io/steveeeie/pen/NVWMEM . It works very well but at the level of my navbar, it goes above and not below when I scroll.
I noticed it's because of position: absolute but i'm trying to change it but it makes my navbar not fix at all at the top when scrolling.
Thank you in advance for your help :)
What you're referring to as a CSS level is actually called the z-index of an element.
You can read up on it here: z-index on MDN.
From MDN:
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
The gist of it is that because your navbar (presumably) comes before these cards in your markup it will be shown underneath the cards. To combat this, set the z-index on the navbar to a value that is higher than the cards. Like so:
.navbar {
/* [your other styles for your navbar] */
z-index: 1000;
}
Related
I have a challenge from my Front-end mentor, and I want to make the footer below the cta-card section
as you can see on the screen
but even when I change the z-index it doesn't affect it at all.
here is the link to the project page : https://cheerfuldev1.github.io/HuddleLandingPage/
Also here is a link to the repo in github : https://github.com/CheerFulDev1/HuddleLandingPage
You can consult this short article from css tricks.
The most common use-case where z-index is not working is where one or more elements do not have a position property set to either absolute or relative
z-index only affects elements that have a position value other than static (the default).
z-index worries aside, it seems that z-index is not actually used on the example page, you can find this out by inspecting the rendered html for the footer.
To extend on #Scott Anderson his answer,
He is right you need to set the position property try the following css
.cta-card {
position: relative;
z-index: 1;
}
.cta-card .card {
background-color: white;
}
the first block is to use z-index and have the footer appear behind it.
The second block is so that the card has a white background as it didn't have it in your example
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]
I am currently trying to create a landing page for a photoshop layout. I am quite new to HTML and CSS and I am having trouble solving this. My drop-down menu lists are getting covered by the content. I think it might be about positioning... Thanks
I will attach a picture and I will also share my code if needed...
Dropdown menu getting covered by content (positioning) IMAGE
As previously stated you can use z-index to determine how elements are rendered on top of each other. Elements with an higher z-index are on top of elements with a lower z-index.
According to the MDN docs:
The z-index CSS property specifies the z-order of a positioned element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.
Just but z-index:999; on your dropdown.
Objects with higher z-index number will go above those with lower numbers.
Add the CSS attribute z-index: 999; to your dropdown's CSS. Not necessarily should it be 999, but just that 999 is the maximum one can use in z-index.
The property of z-index is that a division with a higher z-index will be displayed above a division with a lower number in the z-index, therefore allowing you to decide the hierarchy of the appearance of different divisions.
To know more, visit https://www.w3schools.com/cssref/pr_pos_z-index.asp
If z-index is not solved, you can check nav container and if you found overflow-y you can comment that line.
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.