ansaurus

Question

Answer 1

A:

Hi

Your question is not quite clear but I think you are trying to do something like this? change your css to:

body {
padding: 0; margin: 0; }
#first {
background: blue;
padding: 0px 25px 25px 25px;
margin-bottom: -10px;
z-index: 7;
}
#second {
position: relative;
background: #DDD;
border: 1px dashed gray;
height: 200px; 
z-index: 8;
display: block;
}
#precedence {
height: 40px;
width: 40px;
background-color: #f09;
z-index: 9;
position: absolute;
left: 100%;
margin:0 0 0 -65px;
}

does the same as what you have but also works in ie6/7

yes there is an absolutely positioned element there. I know you specified non absolute but see how it works as I think it's what you want.

Also, in your css there is a mistake in the #first properties

position; relative;

should be

position: relative;

but that div didn't need to be positioned anyway

Chris J 2010-09-13 02:06:14

I specifically said, it "needs to be adaptable to content", and can't use absolute positioning.. This would be a piece of cake if I could use absolute positioning. The pink box represents a flexible piece of the interface where a logo is going to go. Not only can I not do this because the box wouldn't adapt to the size of the image, but I have it set up so the pink box will wrap if the navigation links on the same bar come in contact with it. So this doesn't help me.

2010-09-13 02:30:55

@xckpd7 does the pink box need to remain on the right, within the 25px padding of #first? And if a menu pushes further right it will wrap below the menu but still inside the #first div?

Chris J 2010-09-13 02:54:24

@Chris J: So basically I stripped a lot of code out to isolate the question I'm trying to make. Basically the pink box is a ribbon of sorts, which is always going to come from the top of the page (with a little right padding). There are navigation links inside the top bar, which will control the real hight of the #first element. The navigation links will be floated left, and the pink box will be floated right (with the pink box coming first in the DOM). When they come in contact with each other, the navigation will wrap below (which might be yet another reason I can't use abs).

2010-09-13 03:19:39

ansaurus

tags:

views:

answers:

IE6 & IE7 z-index (non absolute) issue

related questions