I have a problem with a box-shadow, being obscured by another div.
Here is my code:
HTML-
<div id="wrap">
<div id="header">
<div id="nav"></div>
</div>
<div id="main_content"></div>
<div id="footer"></div>
</div>
CSS-
body{
margin:0;
}
#wrap{
margin:0 auto;
width:84%;
}
#header{
background-image:url(img/header_pattern.png);
background-repeat:repeat;
margin:0 auto;
width:100%;
height:170px;
box-shadow:5px 5px 5px black;
z-index:1;
}
#main_content{
background-image:url(img/main_pattern.png);
background-repeat:repeat;
width:100%;
min-height:700px;
height:100%;
z-index:2;
}
Screenshot-
http://i.stack.imgur.com/TfDyi.png
How can I make it so that the shadow is not "stacked under" (on the z-axis), and hence obscured by, the #main_content div, but still inside my #wrap?
Thanks.
No, I don't just wan't to push the #main_content down.
Just add:
position: relative;
To #header{
Example:
http://jsfiddle.net/kJajC/
You need to "position" an element, if you want to "stack" it differently on the z-axis using z-index.
Note that if you don't actually want to change its position on the x/y plane, then just specify that it is position:relative; without any of the top, bottom, left or right x/y offsets and it'll be positioned on the x/y plane where it would've been laid down statically anyway.
From MDN on adding a z-index:
Warning! z-index only has an effect if an element is positioned.
I found their series of articles Understanding CSS z-index really helpful with this stuff.
Related
I'm trying to make an image under a title on the top left but the image doesn't want to cover the left side.
I changed the position to position: absolute, made the margin and padding 0, inspected the HTML page and can't see anything that can influence this image.
The HTML:
<div class="header">
<div class="container">
<div class="row">
<div class="col">
<h1>Dillan Robbertze<h1>
<img src="mountain-og.jpeg">
</div>
</div>
</div>
</div>
The CSS:
.header img{
height:Auto;
left:0;
margin:0;
padding:0;
position:absolute;
width:100vw;
z-index:1;
}
Expected Results: Image is under the title top left.
Actual Results: There is a white space left and top of the image.
EDIT: I added top:0; thanks to #Somesh Mukherjee. The image moved up, but there is still a left space that shouldn't be there.
add a class to the parent div element. and add position relative to it.
.myNewClass {
position: relative;
}
also, make sure your parent elements don't have margin and padding. for that, you can use a CSS reset like this:
* {
margin: 0;
padding: 0;
}
though this will make sure all of your elements don't have any margin or padding so you need to specify all you need by yourself. you should put this at the top of your CSS file if you want to use it.
You have not specified the top attribute
.header img{
height:auto;
left:0;
top:0;
margin:0:
padding:0;
position:absolute;
width:100vw;
}
why don't you try:
top: -28px;
position:relative;
Helped me once, or twice in similar situations.
I have divs that have a background image, and I set them to be positioned relative with a high z-index. There are four of them and they should be seen under good examples here. However, they do not show up in the document, my guess because of a stacking issue
My HTML code
<div id="white_house" class="ext_image"><div class="view_site"></div></div>
<div id="abc" class="ext_image"><div class="view_site"></div></div>
<div id="quartz" class="ext_image"><div class="view_site"></div></div>
<div id="usatoday" class="ext_image"><div class="view_site"></div></div>
CSS (only one id is shown but same general style applies)
#ext_image {
position:relative;
z-index:5000;
}
#white_house{
width:490px;
height:231px;
background:url('http://webmaster.tsaprotectandserve.com/new_design/images/white_house_website.PNG') no-repeat center;
background-size:100%;
float:left;
margin-bottom:20px;
position:relative;
z-index:5000;
}
I have div inside a div (.konteineris2 and .feedback). When I use left:-200px in .feedback class, fixed div suddenly appears in the very left side of screen, outside .konteineris2. All I wanted it to move for 200px to the left outside .konteineris2, but not appear to the left screen border and then move 200px from that point.
HTML:
<div class="konteineris2">
<div class="feedback">
</div>
</div>
CSS:
.feedback{
position:fixed;
top:220px;
width:100px;
height:200px;
background:white;
}
.konteineris2{
width: 960px;
height:700px;
position:absolute;
top:460px;
padding-top:30px;
pointer-events:none;
overflow:hidden;
}
Any ideas how to manage it?
change position:absolute; to position:relative; in .konteineris2
Add margin-left: -200px; in .feedback
Check it on CodePen . I think you're looking for the same thing.
Without seeing more of the context in which this occurs I'd guess the following might achieve your goal: Try adding margin-left:-200px instead.
I am having an issue with overlapping items within a floating div. I must be applying the z-index wrong, but I've tried a few different things and I can't get the two items to overlap. I have the following code (note: topLink and topIconNew divs are actually pngs):
http://jsfiddle.net/jhacks/neskB/7/
HTML:
<div class="topIcon">
<div class="topIconNew"></div>
<div class="topLink"></div>
</div>
CSS:
.topIcon{
border:1px solid black;
background-color:gray;
width:28px;
height:40px;
float:right;
position:relative;
}
.topLink{
background-color:green;
width:16px;
height:16px;
position:absolute;
top:14px;
left:6px;
z-index;300;
}
.topIconNew{
background-color:red;
margin:30px 0px 0px 18px;
width:10px;
height:10px;
position:relative;
z-index:350;
cursor:pointer;
}
The HTML for the pngs (if it makes a difference):
<img src="xxxxx.png"> </img>
EDIT** I've done it! Finally. Thank you for the help... upon seeing your code I saw the use of absolute and relative together. I now have a better understanding over the usage of those things and now instead of positioning things with padding/margins, I'm using (and correctly so I'd assume) positioning. I feel stupid for doing what I was doing.
Thanks for the edits, your question is much more clear now. I think this will satisfy your question.
http://jsfiddle.net/neskB/26/
Okay, so this makes a lot more sense now.
You have gray div floated right
You want to center a green div in this
You want a red div in bottom right of green div
First I would change your html structure to this.
<div class="topIcon">
<div class="topLink">
<div class="topIconNew"></div>
</div>
</div>
Link will be positioned relative to its parent Icon.
New will be positioned relative to its parent, Link.
/* set topIcon to relative so that its child will be positioned relative to it */
.topIcon{ position: relative; }
/* topLink is absolute positioned. We use top/left of 50% and negative margins to automatically center it */
.topLink{
position: absolute;
width:16px;
height:16px;
margin:-8px 0 0 -8px;
left:50%;
top:50%;
}
/* New is positioned in bottom right of its parent */
.topIconNew{
position:absolute;
bottom:0px;
right:0px;
}
This is my example code which is not working as expected in IE7 - I think position:relative; is the issue for IE7
.oner {
position:relative;
height:50px;
background:#fff;
border:5px solid #e4e4e4;
height:200px;
margin-top:20px;
}
.onea {
position:absolute;
height:500px;
right:0;
width:200px;
background: #eee;
z-index:999;
}
.onet {
position:absolute;
height:500px;
left:0;
width:200px;
background:red;
z-index:999;
}
HTML:
<div style="height:500px;width:900px;margin:auto;">
<div class="oner">
<div class="onea">IE IE7 this div goes behind the "oner" div below </div>
</div>
<div class="oner">
<div class="onet">My name is Sumit Kumar Ray my email is ..</div>
</div>
</div>
What happens is that the onea div goes behind the following oner div, but in other browsers it overlays it
setting a z-index on a div is actually supposed to create a stacking context, not simply bring the div, it's applied to, above another.. so while I do think IE7 didn't get it quite right, (surprise!)
I think it would be better to make the oner divs the ones that create the start of the stack by setting the z-index on them, and what you want it for the first oner to have a higher z-index than the second
<div style="height:500px;width:900px;margin:auto;">
<div class="oner" style="z-index: 1;">
<div class="onea">IE IE7 this div goes behind the "oner" div below </div>
</div>
<div class="oner">
<div class="onet">My name is Sumit Kumar Ray my email is ..</div>
</div>
</div>
with this there is no need for the Absolutely Positioned children to have a z-index at all, as those divs now take their "z level" from their relatively positioned parent - IE and the stack can be quite confusing!
CSS:
.oner {
position:relative;
height:50px;
background:#fff;
border:5px solid #e4e4e4;
height:200px;
margin-top:20px;
}
.onea {
position:absolute;
height:500px;
right:0;
width:200px;
background: #eee;
}
.onet {
position:absolute;
height:500px;
left:0;
width:200px;
background:red;
}
However it does mean that if you have more than two as in this example you need to set the levels on all the oner divs with the first one being the highest.. (that's why I put the oner style inline in the HTML if you have more you might need some more classes to separate them)
Since both the inner divs have a zindex of 999 the second should overlay the first, although zindex results can be unpredictable across browsers. Really you should set different zindex values to accurately control depth.