logo标签列表

绝对定位元素继承相对定位父元素的宽度

cssnestedparent-childcss-position
19

我试图在一个行内/内联块锚点链接上放置一个渐变色，让该渐变色继承其父级锚点的宽度。但问题是 span 元素要么继承整个锚点父元素的宽度，要么只继承   的宽度。我无法使 span 元素正确继承宽度并保持锚点的内联显示。

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>
1个回答
27

据我所知，无法使用position: absolute来实现。

不确定这是否适用于您，但可以尝试将a元素的属性设置为position: relative，将a span元素的属性设置为。

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

?

5
不，我的意思是仅将父元素设置为“相对定位”，而保留子元素的“绝对定位”，这样可以使子元素占据与父元素相同的空间（如果这正是你想要的）。 - Pekka
3
哦，奇怪，我一直以为相对定位是自动的，没想到我需要在代码中定义它。这解决了问题，谢谢！ - abysslogic
4
它被称为冲突的绝对定位：http://www.alistapart.com/articles/conflictingabsolutepositions/ - user241244
哇，我不知道相对定位也必须特别定义。谢谢你的回答！ - Dominique
1
对于那些认为“相对”定位是默认的人来说，实际上默认的是“静态”定位。 - Sean Kendle
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接