允许绝对定位元素比父绝对定位元素更宽

Question

背景

我有一个小的单级CSS弹出菜单(从技术上讲,它是一个扩展元素).它绝对位于父级绝对定位元素的左下方,该元素相当窄.请参阅h1下面的第二个元素:

<div id="controls">
   <h1>Controls 1</h1>
   <h1 id="size" class="poplinks button">
      Size
      <a href="#" class="button selected" title="small"><img src=""></a>
      <a href="#" class="button" title="medium"><img src=""></a>
      <a href="#" class="button" title="large"><img src=""></a>
   </h1>
</div>

这很简单就变成了一个扩展菜单/弹出窗口,如下所示:

.poplinks:hover {
   width:auto;
}
.poplinks a {
   display:none;
}
.poplinks:hover a {
   display:inline-block;
}

问题

这会产生以下类似按钮的元素:

在h1具有风格width:48px;,而且也有应用样式规则width:auto;的h1在悬停的元素,所以它应该能够扩大.但是,在悬停时,子菜单被迫保持不比父元素的宽度宽,当我希望它向右延伸时(在父元素的包含框之外).

我想看到的(通过将元素移动到父元素之外获得,但我希望它保留在内部以继承样式,因此当我将菜单栏从左侧移动到顶部时,它会自动跟随):

这可能吗？你有什么建议？

在JS小提琴中为自己看这个.

浏览器

注意:我计划在Firefox,Chrome和IE 8中使用它.我正在使用Firefox和Chrome中的主要样式,并且基本上完成后,将添加条件CSS以使IE正常工作并尽可能接近.

合理

我绝对定位父菜单的原因是我正在构建一个类似应用程序的页面来显示图像.该页面将托管在父Windows应用程序中,不需要大量识别信息:只显示所需的图像.我选择使菜单绝对定位,而不是使用内联块或浮点数或其他方法来使我的菜单列到位(有两个).但是,它不一定是这种方式.如果您对替代布局或策略有建议,我会全力以赴.

Answer 1

首先,你的#controls需要overflow:visible.然后,#size应该给出一个明确left而不是right.最后,.poplinks需要white-space: nowrap防止包装.

http://jsfiddle.net/VaWeK/11/