CSS，只允许 1 个 child 扩展到 parent 之外。 float 图片必须留在里面

Question

我有一个父容器。它有一些文本、一个 float:right 图像和一个选项框。通常选项框是不可见的。但是，当它出现时，它必须出现在其下方文本的顶部(因此position:absolute)。

问题是选项框需要扩展到父级之外，而其他元素必须留在父级内。或者，选项框应该扩展父项，但仍位于文本之上。

Position:fixed 不起作用，因为它必须可以滚动。我创建了一个 fiddle 来说明这个问题。

http://jsfiddle.net/VU5Ub/1/

图像在父图像之外。

<div id = "page">
    <div id = "parent">
        <div id = "top_text">Pick 1:</div>
        <div id = "image"> </div>
        <div id = "x">&nbsp;
             <div id = "options"></div>
        </div>
        <div>i get hidden by the options, as desired</div>
    </div>
</div>

#page{height:230px;}
#parent{width:200px;
    background:red;
    overflow:visible;
}
#top_text{float:left;}
#options{height:200px;
    background:yellow;
    width:50px;
    position:absolute;
    z-index:2

}
#x{position:relative;}
#image{height:90px;
       width:40px;
        float:right;
    margin-right:10px;
    background:pink;
}

Answer 1

停止使用

float: left;

float: right;

使用

display: inline-block;

相反。通过这种方式，您的图像将扩展父元素。