Question

我有一个问题，我想在DIV的左上角显示一个标题。如果我将父级设置为relative而内部div设置为绝对，那么我可以将其定位，以便backgroundimage位于右上方，所以它看起来像这样：

http://www.landingapollo.com/random/stackover1.png

这是正常的。但是，在另一个实例中，它无法正常工作，因为父容器的溢出设置为隐藏。因此它显示如下：

http://www.landingapollo.com/random/stackover2.png

相关代码：

这是主要容器

.container {
overflow: hidden;
position: relative;
float: right;
width: 650px;
margin-left: 5px;
margin-right: 7px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

这是标题背景

#pinnedthree_title {
position: absolute;
width: 200px;
height: 30px;
background: url('images/headers/latestnewsheader.png') no-repeat left;
z-index: 100000;
top: -20px;
}

Answer 1

如果您为父容器指定正确的height，即使您使用overflow: hidden;

，它也会显示您的内容

绝对元素不会将相对元素推送到正确的大小。

基本上，如果你的相对容器只持有你的绝对容器，那么它的高度为0，因为它不包含任何会增加其高度的东西。

因此，当您使用overflow: hidden;时，它会隐藏超过相对容器高度的任何内容（在我的示例中为0）

因此，请尝试为您的相对容器指定正确的height并查看是否有效。

Answer 2

我想你需要另一个div才能达到你想要的效果。

<div class="floater">
  <div class="container">...</div>
  <div id="pinnedthree_title">...</div>
</div>

.floater {
  overflow: visible
  position: relative;
  float: right;
  width: 650px;
  margin-left: 5px;
  margin-right: 7px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

.container {
  overflow: hidden;
  position: absolute
  width: 650px;
}

#pinnedthree_title {
  position: absolute;
  width: 200px;
  height: 30px;
  background: url('images/headers/latestnewsheader.png') no-repeat left;
  z-index: 100000;
  top: -20px;
 }

CSS Overflow阻止子继承

2 个答案: