Absolute element inheriting relative parent div's width

css, css-position, nested, parent-child

Solution

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;

?

Problem

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 &nbsp;. 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> ```

Original source