This question already has answers here:
Why does z-index not work?
(10 answers)
Closed 3 years ago.
I have an issue with my css, when I log in or sign out, I have a message that displayed. The issue is that the text is displayed behind another button, to try to solve this, I thought that I could add a z-index an set it to around 20 to be sure it will be over everything but when I applied it, nothing happend and I don't know why. Here is the CSS code:
.alert-success {
z-index: 20;
background-color: #dff0d8;
border-color: #d6e9c6;
color: #3c763d;
}
.alert {
padding: 15px;
margin-bottom: 22px;
border: 1px solid transparent;
border-radius: 4px;
}
and 2 photos for you.
z-index only applies to positioned elements, and yours are not.
Set a position value other than static (you likely want relative as it has the fewest side effects).
z-index specifies the stack order of an element but z-index only works for positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).
Element with greater z-index would always be in front of element with lower z-index.
Related
This question already has answers here:
Why does position:relative; appear to change the z-index?
(2 answers)
Why setting absolutely positioned element's sibling as position:relative, brings it above the former?
(1 answer)
Closed 1 year ago.
I am trying to set the background of the body to an image using background-image, and I have content that I want to be placed on top of the image. In the CSS, I am setting the background using the body selector with the ::before pseudo-element; however, the image doesn't come in the background unless if I use z-index: -1. (I am using ::before because I want to fix the image to the viewport, and I don't want to do that in the regular body selector as that will fix all the content on the page and prevent me from scrolling through the content.)
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-image: url(...);
}
form {
background: purple;
border-radius: 5px;
padding: 50px;
width: 40%;
margin: 0 auto;
}
<html>
<body>
<form></form>
</body>
</html>
My question is: Why do I need to set the z-index to -1 in order for the image to appear in the background? Why doesn't it appear in the background automatically "before" all the content? Isn't that what the purpose of ::before is?
A bit tricky part here. First ::before doesn't mean that this pseudo element goes precisely before form element. In fact this means create pseudo element before any children of form element. Vice versa for ::after. Second you set position: fixed; for ::before thats create new stacking context for it - simple this is the reason (not really check: Why does position:relative; appear to change the z-index?) why it overlaps the content of form element.
UPD
Probably you should use background-attachment: fixed; on body element https://www.w3schools.com/cssref/pr_background-attachment.asp
This question already has answers here:
Any way to declare a size/partial border to a box?
(6 answers)
Closed 3 years ago.
I'm doing some work on my website, I wanted to put that border thing with ::after(I don't want to do it with border-bottom because I want to set specific width) method, unfortunately when I'm trying to set the "::after" to position "absolute", and the container of it to position "relative", but the problem is the container somehow gets the position "absolute" which I don't want it to
I tried to set inline style but it doesn't give best performance.
HTML:
<h2 class="special-heading">Our Team</h2>
CSS:
.special-heading {
position: relative
}
.special-heading:after {
content: '';
display:block;
position: absolute;
top: 10px;
left:0;
width: 40px;
border-bottom: 3px solid #333;
}
I would try this instead of top: ...px
margin-top: 10px;
But not sure!
I think you can achieve what you want to achieve by replacing the line top: 10px with bottom: 0.
I tested it in codepen and the .special-heading got the position: relative properly.
http://www.milknhny.co.uk/SofiaWork/home/
Hi
The following has a banner, which has a box shadow, and i want it to sit over the top of the image.
Ive tried putting a z-index and position of absolute on the div class .maincontentinner
however the background seems to mess up (with it being a gradient) when i do this.
Any ideas how i can achieve this? I have a clearfix in there also
thanks
style.css line 431
.headerwrap {
width: 100%;
height: 218px;
background-color: #ffffff;
box-shadow: 3px 3px 8px #41434b;
posistion: fixed;
z-index: 99999;
}
Change posistion to position.
First off, I'd use relative rather than absolute positioning, since I don't think you want to disrupt page flow.
I applied:
position: relative;
z-index: -1;
to .maincontentinner and it seems to work just fine. What do you mean by "the background seems to mess up"? What browser are you testing in?
My plain old CSS menus are appearing behind jQuery UI stuff like tabs! Even though the z-index of the containing divs are correct. Is there a way to resolve this?
/* dropdown menu container */
#navigation-1 li ul.navigation-2 {
margin:0;
padding: 5px;
display:none;
position:absolute;
top:71px;
left:-71px;
border-radius: 4px;
border: 3px solid #ea453c;
background:white;
width: 730px;
box-shadow: 0 1px 6px #999;
z-index: 999;
}
Yes. try to explore or experiments the position in the css like : relative, fixed, absolute etc.
Note: your not able to use z-index if your div/element doesnt have a position like relative, fixed, absolute etc. :D
I used Firebug to explore the CSS more carefully and found the the ui-menu class already has position set to absolute. I then added this rule:
.ui-menu{
z-index: 10;
}
You may have to experiment with the exact value depending on circumstances but that value brought my menu items safely above the tabs. You could add a more specific selector for the menu's parent container if you only want to apply this to a specific menu.
i'm using a empty div to display a line by setting height 3px. it works fine in all browsers but in ie6 the height div displayed with 20px height. It remains same even for height:0px . But changes in other properties reflects but not height and there is no duplicate css entry and inherited value from other div. Can any one help please
<div id="line"></div>
CSS:
#line {
border: none;
background-color: #134c7c;
height: 3px;
margin-bottom: 20px;
}
Internet Explorer has the odd idea that the content of every element should be at least one character high. You can get around this by using the overflow attribute, that way the content can remain a character high, but it doesn't affect the height of the element itself:
.line { height: 3px; overflow: hidden; }
Try:
line-height:0
Just a wild guess.
Inspect whether there is any space inside the element. If yes then set the
font-size: 1px;
property of the element.
try with space in the div or
Just guess