Question

我有一个父元素，包含overflow：hidden和两个重叠的子元素。我想要一个孩子听溢出：隐藏，一个人无视它。现在，两个孩子都听溢出：隐藏。我想隐藏溢出隐藏！

<div class="ihave-overflow-hidden">
  <div class="i-will-not-overflow">Some text</div>
  <div class="but-i-will-overflow">I'm a Popover and popovers should always overflow</div>
</div>

我想上课＃34;但是我会溢出＆＃34;溢出父母级＆＃34; ihave-overflow-hidden＆＃34;。

注意：这个html设置可以不幸的是，我不能在这里更改html结构，所以我必须使用这些类的纯css（：之后＆amp;：不允许）

Answer 1

这样的事情会得到你正在寻找的结果：

.ihave-overflow-hidden{
    overflow: hidden;
    height: 15px;
    width: 30px;
}
.i-will-not-overflow{
    position: inline;
}
.but-i-will-overflow{
    position: absolute;
}

通过使第二个作为溢出，它忽略父母溢出。

Answer 2

试试这个https://jsfiddle.net/2Lzo9vfc/42/

<强> CSS

.ihave-overflow-hidden {
    height: 100px;
    overflow: hidden;
}

.i-will-not-overflow {
    display: inline-block;
    float: left;
    width: 50%;
}

.but-i-will-overflow {
    display: inline-block;
    width: 50%;
    position: absolute;
}

溢出溢出：隐藏容器而不改变HTML结构

2 个答案: