sometimes got into this problem but I have always avoided it using some alternative code.
Unfortunately, this time I need a hand.
in IE7 if two brother DIVS have "position:relative" absolute-positioned children of them disappear under the "next brother DIV"
http://jsfiddle.net/qN74X/
<div style="width:200px;position:relative;background:yellow;">XXX
<div style="position:absolute;z-index:1;background:red;
height:70px;top:0;left:50%;">ZZZ</div>
</div>
<div style="position:relative;width:200px;background:pink;">YYY</div>
how can I solve this?
thanks
When hovering over the element, set it's z-index as well (not just the tip). Here's the main change:
body > div{
position:relative;
z-index:1;
}
body > div:hover{
z-index:5;
border:0 none;
}
Basically, on the outer container (where the background was) was what needed to have it's z-index changed. I am also unsure of why I needed to put border:0 none but without it, it didn't work.
jsfiddle: http://jsfiddle.net/qN74X/3/
Related
I have assigned a fixed positioned menubar a high z-index, yet it still appears below other elements on my website. Is there an alternative technique I could use or something wrong with the code I have written. My website with the issue is here (note: you need to scroll up after scrolling down for the navbar to appear). The menu bar that is not appearing properly has the following code
#headerfull {
position:absolute;
top:-100px;
left:0;
z-index:10000;
width:100%;
height:100px;
background-color:#000000;
opacity:.7;
display:none;
}
but, for some reason, the z-index does not work. Elements like the "NinjaWarrior.info" image in the front and center, with a lower z-index appears in front of the navbar. The code for that image is below
<img style="position:absolute;z-index:10" src="images/logo_main.png" width="900" height="300" alt="American Ninja Warrior Fan Site">
Add this css:
#header {
position: relative;
z-index: 10000;
}
z-index works on containers with the same stacking context.
In your code, the DIVs header and content are siblings, and that's a condition for z-index numbers to apply.
The most easy way of memorizing this rule is by "code versioning":
<DIV with z-index=1>
<DIV with z-index=3/>
</DIV>
<DIV with z-index=2>
So, like decimals, or versioning number, 1.3 will never be greater than 2, and therefore the inner DIV will be always rendered below the second outer DIV.
Other than that, you need to apply positioning to each DIV which sets z-index.
I just set a big number because I was lazy, you can find a good feasible number by yourself if you want =), but this code works as I tested it on your website.
Thank you.
Be sure to read: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
z-index is not working for me on child elements because of width and height which is declared ,I started adding {display :Inline} on my parent div on hover of child div.
If you take a look at this website I am designing (http://babblers.in/main.html) there is a problem of z-index for div elements. Click on the stork & baby image at the bottom left. There is a close button in the expanded image which gets hidden under the sliding buttons.
The code for my main.css is:
#SlidingButtons {display:block;overflow:hidden;position:absolute;left:320px;top:130px;width:840px;height:800px;z-index:4;}
#Points {display:block;overflow:hidden;position:absolute;left:0px;top:170px;width:600px;height:730px;z-index:3;}
Sliding Buttons are the ones on the right
Points refers to the stork image and the selectable points on left
What do I do to get the expanded image above the sliding buttons?
Setting opacity for sliding buttons to .99 does not work.
Z-index is notoriously tricky and picky, if you aren't 100% with it. Try this.
#Page {
overflow: hidden;
position: relative;
height: 775px;
z-index: 10;
}
EDIT: Scratch that, your entire web structure is the problem. Try not to use Z-Index, unless you need to.
Though here is a word of advice when using z-index. Z-index only applies in relation to sibling elements.
<div>
<div class="one">
<div class="four"></div>
</div>
<div class="two"></div>
<div class="three"></div>
</div>
with the following CSS
.one{
z-index:1;
}
.two{
z-index:10;
}
.three{
z-index:100;
}
.four{
z-index:1000;
}
in this example div.four would appear lower than div.two, because div.four's parent has a z-index lower than div.two. As the z-index only applies in relation to sibling elements, even if an element has a higher z-index but it is in a sub element it won't have a higher screen z-index than its most top level parent element with a set z-index.
OK this is fairly complicated to explain so I've put it online here:
http://jsfiddle.net/zSgPr/10/
I need the yellow container to wrap around the lower brown div and red footer div in this set-up, leaving the footer at the bottom of the page, ideally where I can then adjust it by pixel margins. I have tried multiple ways of clearing it with some luck, however I can't figure out how to get the footer to behave or the content to encapsulate properly. Could somebody suggest a means of doing it? Thanks guys.
This is what I am trying to achieve
Answer:
Was overlooking the obvious that I needed another container div. If anyone wants to see it's on-line here: http://jsfiddle.net/zSgPr/21/
Add bottom:0 to .textbox
Plcace the .textbox div outside the container which means when you are giving position:absolute the parent div should have Position:relative so add relative to main div which is .page
LIVE DEMO
SOLUTION
Change .textbox style like this mayble helpful
.textbox{
margin:0px 10px;
background-color:#262626;
width:700px;
position:relative;
z-index:40;
border:2px dashed #381e01;
float:left;
}
DEMO
Hey guys, ive been working on this drop down for wayyy to long now. I just cant get the drop down to fall on top of the main content on the page. I have tried adding position: relative and z-index on all relevant areas.
I think what may be causing the problem is "overflow: hidden" in some places.. but that is by far my favorite way to contain floats..
http://dev.redstoneinvestments.com/index.php?s=&p=redstone&v=home
Any suggestions?
Remove position: relative and overflow: hidden from both header and maincontent. If you need to clear the floats, use the clearfix method: http://net.tutsplus.com/tutorials/html-css-techniques/css-fudamentals-containing-children/ (this article specifically explains why clearfix is a better solution than overflow: hidden when you have absolutely positioned elements that need to extend outside the container).
change #header css to
#header {
background-color:#FFFFFF;
height:140px;
width:900px;
}
that enough, it fixed the problem on my firefox.
I cannot get the background to stretch behind the contentbox. The strange thing is, it works with Internet Explorer, but not with Firefox.
I hope it is enough to give you a link, since I do not know where the problem is in the code, it would not make much sense to post the whole code in here.
http://www.yiip.de/arbeit/testlayout/standard_template.html
You can also add overflow:hidden; to #shadow. That will clear the floats without having to put additional markup in your html.
try adding the following 'clearfix' style to your wrappers
.clearfix:after {
content:"\0020";
display:block;
height:0;
clear:both;
visibility:hidden;
overflow:hidden;
}
.clearfix {display:block;}
You need to clear your 3 floated divs for the containing div to expand vertically around them. The easiest way to do this is to add
<br clear='both' />
after the third floated div (but within the container div).