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
Related
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;
}
I ran into this issue while implementing a sticky footer solution. I have the footer working well, but my body element which encompasses everything within the tag just will not auto-extend beyond a random point further down that can only be reached by scrolling down (it's a lengthy page). My intention is for the body container (does that sound morbid or what?) to auto extend past all the div elements it contains. Isn't that what it's supposed to be doing? Right now there are still div elements sitting further down from where it ends, and the footer is sitting in the middle of my page right below it. If I can't achieve this behavior, I'll have to set the body to a fixed position in css, which I don't want to do.
Using the following CSS styling doesn't work, probably because my content extends beyond a page.
html, body {min-height: 100%; height: 100%;}
Can someone articulate what the most likely issues could be? Also, feel free to make any constructive comments on my code. This is my first web project.
Here's a link to my HTML code on CodePaste: HTML Code
And here's a link to my CSS code: CSS Code
Lastly, a link to a screenshot of my webpage showing the issue. Screenshot
The green bar is the footer, and the red border is the body element styled in css so it can be viewed. You'll see it ends right after the picture.
I'm pretty sure your main problem is setting the height of the body tag. Try not giving it a height (no max-height or height tags) or giving it height: auto to make it expand as its contents.
It could also be that you are setting child elements to positon: absolute which means that the parent will collapse to the size of whatever non-absolute elements are inside it.
Also, why the <p1> tags? They should be just <p>.
Code criticism:
It was extremely difficult to figure out what the problem was and I'm not sure that I gave the correct solution because of the way you showed your code. In future, try to give your code as a JSFiddle or a Codepen.
Also, consider using a CSS framework which will reduce the amount of CSS code you write a lot. I would suggest Bootstrap or Materialize but Bootstrap is more widely used.
Don't forget to follow CSS guidelines which will make your code more readable.
You could stretch the element to the full height of the window using vh.
.container{
height: 100vh;
}
You could then position your footer to the bottom using absolute position.
footer{
position: absolute;
bottom: 0;
}
I've used this in the past for full page landing pages that aren't meant to scroll.
I don't exactly know what the question is asking, but I experimented a bit and figured that if you remove the 1 from the <p1> so you would have a normal <p> tag, it moves the text up completely. I have a very rough JS Fiddle.
Thanks to all who contributed. Based on suggestions from Sankarsh and Ori, I was able to solve the problem. Once I changed my div to just as they suggested, I noticed it began functioning as I intended and forcing the parent element down beneath it. Unfortunately, that only solved the problem for that element alone. That led to me discovering the element had a default "static" position, while most of my other elements were set to "absolute". After changing the positions of the bulk of my content to "relative" or "static", everything is working as intended!
TLDR: If you want a child element to stay within the boundaries of its parent element, you need to set the child's position to "static" or "relative". You cannot use "absolute". This way, instead of overflowing beyond the border of the parent, the child will automatically extend the parent's border to its intended position.
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
I'm trying to place a div on top of all divs in a web page.
The common question to this is:
prepend your div to the body element
add a z-index property bigger than every other's
The problem:
i can't move my div in the DOM tree (due to angular limitations)
After reading the following article, it seems to me to be impossible.
Is that so?
http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Any help is much appreciated
UPDATE:
Thank you guys
#user2604405 - I forgot to mention the fact that I want this div to cover all page, so I think only position: fixed is pertinent.
#shujatAli - I've said I can't move the div due to angular limitations.
#Explosion Pills - It is ok to move the div, as long as it covers all page.
#Flavio Paulino - z-index solution won't work =/ (the div is way down in the DOM tree).
#Jasper - I've tried using position: fixed; but it doesn't work since other divs also have z-index defined. And I can't clone the elemento to body because it's outside my AngularJS module which break my model bindings
yes!
just add the highest z-index on this div, like:
z-index: 1030;
Yes it is possilbe in three ways
Relative
div
{
position:relative;
left:-20px;
}
relative positioning will retain the original place of the element
Absolute
div
{
position:relative;
left:-20px;
}
Absolute positioning will not retain the original place
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
The above code is overlapping elements positioning, it can be made available by setting the z-index property.
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.