I'm afraid I'm not understanding z-index properly, and can't get my CSS to layer as I'd like it to. I'm trying to get a description to float above a bottom fixed div, which I thought would be simple with z-index - give it an index of 3, higher than the two other units on the page. But for some reason it's not behaving as expected - can anyone tell me why?
HTML example:
<div id="wrapper">
<div class="portfolio-slideshow">
<div class="slideshow-meta">
<p class="slideshow-title">My Title</p>
</div>
</div>
</div>
<div id="footer-hairline">
</div>
CSS:
#wrapper {
margin: 0 190px 0 100px;
}
.portfolio-slideshow {
margin: 10px 0 0;
z-index: 1;
clear: both;
position: relative;
}
.slideshow-meta {
position: fixed;
bottom: 30px;
font-size: 13px;
color: #989799;
line-height: 14px;
z-index: 3;
}
#footer-hairline {
height: 70px;
width: 100%;
border-top: 1px solid #CCC;
background: #FFF;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
}
If I remove .portfolio-slideshow's z-index, it works as expected. But why should I have to do that? I'm missing something here, but I can't figure out what.
I made a JS Fiddle to demonstrate here: http://jsfiddle.net/qZzYM/1/
Just answered a similiar question a moment ago
z-index of elements in different parents in Chrome
basicaly
a child element can never have a higher z index then its parent. That's why it works when you remove the parent zindex
Related
For a new Wordpress template, I designed (in Photoshop) a round-ish header that overlaps the image beneath.
The Design:
My try:
Code:
Right now, I'm using a border radius, since I want to do it in CSS rather than cutting out an image (also for responsive reasons).
border-radius: 100% / 100%;
No matter how I change the values, the border won't become nicely rounded.
The website so far: http://voorbeeld.website/19/
Maybe I was a little too creative in Photoshop, but nothing is impossible! Right?
Use a pseudo element, in this case I used the :before
Make sure the .wrapper's elements also have a position, relative or absolute, or you need to set z-index: -1 to the :before
.wrapper {
position: relative;
height: 200px;
overflow: hidden;
}
.wrapper:before {
content: '';
position: absolute;
top: -200px;
left: -10%;
width: 120%;
height: 400px;
background: lightgray;
border-radius: 50%;
}
.content {
position: relative;
padding: 20px;
text-align: center;
}
<div class="wrapper">
<div class="content">
Put your content here
</div>
</div>
Here's part of a design:
As you can see - its simply a button that is exactly positioned between the two divs. The code is simply:
<div class="uc-apply-widget1">
<div class="top">
</div>
<div class="bottom">
<a>Get Started</a>
</div>
</div>
.uc-apply-widget1
{
.top
{
background-color:#primary-color;
height:30rem;
}
.bottom
{
background-color:#primary-600;
padding:0 1.6rem 1.6rem 1.6rem;
a
{
margin-top:-2.8rem;
}
}
}
However, I've come across a problem with using negative margins. I expected to just be able to move the button outside of the bottom div by applying a half height negative margin. Although the button does move upwards, it doesn't move the full 2.8 rem - the amount of movement is the same even if I apply 50rem.
The other solution is to use position relative, which does move the button up, but does not drag the bottom div upwards with it.
So I'm looking to move the button up by n amount and reduce the bottom div height by n amount - any ideas - I may just be having a bad day.
use
position: absolute;
top: 0; left: 0;
transform: translateY(-50%);
on your button
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
Here is one way of realizing your design.
Set the a element to have display: table and position: absolute with
top and left offsets to 0 and 50% respectively.
The display: table rule will give you a shrink-to-fit width, which may be what you need.
You can then use the CSS3 transform property to translate the element by -50% both in the X and the Y directions to get the centering.
The advantage here is that you don't have to specify the dimensions for the a element.
.uc-apply-widget1 {
width: 400px;
margin: 0 auto;
}
.top {
background-color: beige;
height: 10rem;
}
.bottom {
background-color: lightgray;
height: 5rem;
padding: 0 1.6rem 1.6rem 1.6rem;
position: relative;
}
a {
display: table;
width: auto;
margin: 0 auto;
padding: 10px;
border: 1px dotted blue;
position: absolute;
top: 0;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
<div class="uc-apply-widget1">
<div class="top">
</div>
<div class="bottom">
<a>Get Started</a>
</div>
</div>
Please see this fiddle, or the code below:
http://jsfiddle.net/MegaMatt3/92G6X/9/
HTML:
<div id="outer">
<div id="inner"></div>
</div>
CSS:
#outer {
border: 1px solid black;
box-shadow: 0 0 20px rgba(0, 0, 0, 1) inset;
height: 200px;
position: relative;
width: 200px;
}
#inner {
background-color: #55A8FF;
bottom: 0;
height: 50px;
left: 0;
position: absolute;
width: 100%;
}
If I have a parent element, with an inset box shadow, and a child element inside it, the child element appears over top of the box shadow. I'd like for the child element to be "underneath" the box shadow, if possible. The effect would essentially show the inset box shadow on top of the child element.
I've messed with the z-index, but with no luck. Is this possible? Any help would be much appreciated. Thanks.
EDIT:
This question is kind of a mess now, but my original question should have indicated that I'm looking for a solution that works when the outer div has a non-transparent background. I've updated my original fiddle and code to reflect this scenario. The other answers here are valid, but the one I've marked as correct works for me in that scenario.
Another solution that works with non transparent backgrounds:
Set the shadow on a pseudo element
CSS
#outer {
border: 1px solid black;
height: 200px;
position: relative;
width: 200px;
background-color: white;
}
#outer:after {
content: "";
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;
height: 100%;
position: absolute;
width: 100%;
left: 0px;
top: 0px;
}
#inner {
background-color: #55A8FF;
bottom: 0;
height: 50px;
left: 0;
position: absolute;
width: 100%;
}
demo
Set #inner to a negative z-index.
#inner {
background-color: #55A8FF;
bottom: 0;
height: 50px;
left: 0;
position: absolute;
width: 100%;
z-index: -10;
}
http://jsfiddle.net/S8Sm7/
PS:
Remember to close your tags :) just to be safe.
I would add another <div>.
You could use z-index, but if anything else is in the <div> you're going to have modify them all or do some other hack.
I suggest adding another <div> with the shadow. This is a flexible solution.
<div id="outer">
<div id="inner"></div>
<div id="newDiv"></div> // shadow moved to this div
</div>
I had a similar problem here css - box shadow covering all contained divs using absolute positioning
example here: http://jsfiddle.net/92G6X/8/
I have a div with a background image that should be covered with a mask effect. On that div should be some content. I'm trying to get the content to be over the mask but for some reason it isn't working.
I added a jsFiddle:
http://jsfiddle.net/FHt9d/
Here is the code:
Html:
<div id="container">
<div id="mask"></div>
<div id="content"><h1>This is a header</h1></div>
</div>
Css
#container
{
width: 100%;
height: 246px;
position: relative;
background-repeat: no-repeat;
background-size: 100%;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/d/d8/Skyline_oklahoma_city.JPG')
}
#mask
{
z-index: 1;
height: 100%;
width: 100%;
background-color: rgba(75,139,228,.8);
position: absolute;
top: 0;
left: 0;
}
#content h1
{
z-index:2;
font-size: 32;
color: #fff;
}
The text should not be covered by the mask. Any help would be greatly appreciated,
Thanks!
try this (you missed a position: relative;):
#content h1 {
color: #FFFFFF;
position: relative; //missed
z-index: 2;
}
The elements that have
position: absolute
are always on top. Same thing applies to
position: fixed;
They always float above the elements in a browser.
To minimize this, you use
z-index: value;
For the elements with position value set, you can use:
z-index: 1;
and change it for the element you want to be above others
z-index: 2; /* or more than 2 */
This will do the job.
You missed a position: relative; on the #content h1. Indeed, z-index applies only on positionned elements.
I am building a site that has an absolutely positioned banner at the top of the page. This div has a container with id showcase. Overlaying this banner is the navigation bar and logo, both of these are inside a container div called navLogoContainer, it is relatively positioned.
Both of these container divs are NOT children of any other elements (other than body and html), they are independent.
This is the weird part, if I put the navLogoContainer code ABOVE the code for the showcase, the contents of navLogoContainer are not shown, however one of the links is still clickable (the logo), but not visible, everything else (the navbar) is neither clickable or visible.
If I put the navBarContainer code BELLOW the showcase code, everything works perfectly.
Sure, I could just put the navBarContainer code bellow the showcase code and everything would be fine, but this results in my code not being as readable, and not following a logical order, which I would like to avoid. Plus, I'd really like to know when the heck it's doing this!
I'm really baffled by this, I've been trying opacities, display properties, z-indexes, everything I could think of, any help with this would be very much appreciated.
Thanks in advance.
The relevant HTML and CSS (apologies for the scruffiness of, and the comments all over the CSS, it's not yet at release quality :) :
HTML:
<div id="navLogoContainer">
<div id="logo">
<p class="big">Name</p>
<p class="small">Description</p>
</div>
<nav>
Home
Link One
Link Two
</nav>
</div>
<div id="showcase">
<!First showcase>
<div id="firstShowcase">
<div id="firstCaseStudyContainer">
<div id="firstCaseStudy3DContainer">
<div id="firstCaseStudy">
<p class="caseStudyTitle">Case Study Title</p>
<p class="caseStudyDescription">A brief description of relevant stuffView the site or view a second page.</p>
</div>
</div>
</div>
</div>
</div>
The CSS:
/*The code for the navbar*/
#navLogoContainer {
margin: 0px auto;
width: 1050px;
padding-top: 23px;
height: 62px;
z-index: 5;
min-width: 1050px;
}
#logo {
position: absolute;
float: left;
background-color: #00224d;
height: 62px;
width: 273px;
}
#logo a {
position: absolute;
display: block;
width: 100%;
height: 100%;
z-index: 3;
}
/*The showcase container*/
#showcase {
position: absolute;
width: 100% !important;
height: 399px;
top: 0px;
min-width: 1050px;
z-index: 0;
}
/*The backgrounds for the showcases*/
#firstShowcase {
background-image: url("first.png");
margin: 0;
width: 100% !important;
height: 100%;
z-index: 0;
}
/*The CONTAINERS for the case studies*/
#firstCaseStudyContainer {
width: 930px;
height: 399px;
margin: 0px auto;
z-index: 0;
}
/*The 3D containers*/
#firstCaseStudy3DContainer {
position: absolute;
height: 177px; /*Case study box height related. DO NOT SET TO AUTO. This value must be done by hand.*/
width: 410px;
margin-left: 530px;
margin-top: 247px;
background-image: url("3dtriangle.png");
background-position-y: 100%;
background-repeat: no-repeat;
-webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
}
/*The actual text boxes for the case studies. They default to auto*/
#firstCaseStudy {
position: absolute;
height: auto;
width: 392px;
bottom: 0;
margin-left: 9px;
overflow-y: hidden;
-webkit-transition: all 1.0s;
-moz-transition: all 1.0s;
background-color: black;
overflow-y: hidden;
}
From what this says the showcase is doing exactly what you are telling it to do.
you put in the navLogoContainer which has no position, so it's going to be anchored to the top. Then you put in the showcase. This has an absolute position with a top: 0 so it's absolutely positioned to the top of either the page or the container element that both of these are in. So it makes sense that it's covering the logo. If you want the showcase below the logo stuff you need to position it below the navLogoContainer.
So if the navLogoContainer is 50px high the top attribute of the showcase should be 50px. If you're looking to have the navLogoContainer just be above the showcase then you need to give it a position:relative + some z-index love so it knows what it's doing.