Menu
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> </span>Index</a>
651
Absolute In position: relative , the element is positioned relative to itself. However, an absolutely positioned element is relative to its parent. An element with position: absolute is removed from the normal document flow.
Method 2: We can make the display attribute of the child container to table-row and display attribute of parent container to table, that will take all the height available from the parent div element. To cover all the width, we can make the width of parent div to 100%.
An element with position: relative; is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
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;
?
98
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
