Absolute element inheriting relative parent div's width

css nested parent-child css-position
abysslogic picture abysslogic · Mar 7, 2010 · Viewed 34.4k times · Source

I am trying to position a gradient over an inline / inline-block anchor link, and have that gradient inherit the width of that parent anchor. The problem is that the span either inherits the entire width of the anchor's parent, or just the width of the  . I am unable to get the span element to properly inherit the width while maintaining the anchors inline display.

CSS

a { width: auto; display: inline-block; }

a span { background: url(../images/fade_h1.png); width: 100%; height: 12px; position: absolute; display: block; z-index: 3; }

HTML

<a href="index.php"><span>&nbsp;</span>Index</a>

Answer

Pekka picture Pekka · Mar 7, 2010

Can't be done with position: absolute as far as I can see.

I'm not sure whether this will serve you, but how about giving the a position: relative and the a span

left: 0px;
right: 0px;
top: 0px;
bottom: 0px;

?

Related questions

Margin on child element moves parent element

I have a div (parent) that contains another div (child). Parent is the first element in body with no particular CSS style. When I set .child { margin-top: 10px; } The end result is that top of my child is still aligned …

Read More
LESS CSS nesting classes

I'm using LESS to improve my CSS and am trying to nest a class within a class. There's a fairly complicated hierarchy but for some reason my nesting doesn't work. I have this: .g { float: left; color: #323a13; .border(1px,#…

Read More
CSS: position:fixed inside of position: fixed

Okay, I've noticed something, but couldn't find it in the CSS spec. Styling an element with position: fixed will position it absolutely, with respect to the browser viewport. What happens if you place a fixed-position element inside another? Example CSS …

Read More