我有一个父容器。它有一些文本、一个 float:right 图像和一个选项框。通常选项框是不可见的。但是,当它出现时,它必须出现在其下方文本的顶部(因此position:absolute)。
问题是选项框需要扩展到父级之外,而其他元素必须留在父级内。或者,选项框应该扩展父项,但仍位于文本之上。
Position:fixed 不起作用,因为它必须可以滚动。 我创建了一个 fiddle 来说明这个问题。
图像在父图像之外。
<div id = "page">
<div id = "parent">
<div id = "top_text">Pick 1:</div>
<div id = "image"> </div>
<div id = "x">
<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;
}
最佳答案
停止使用
float: left;
float: right;
使用
display: inline-block;
相反。通过这种方式,您的图像将扩展父元素。
关于CSS,只允许 1 个 child 扩展到 parent 之外。 float 图片必须留在里面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17904895/