html - 溢出溢出:hidden container without changing HTML structure

Question

我有一个带有 overflow:hidden 的父元素和两个重叠的子元素。我想让一个 child 听 overflow:hidden 和一个反抗它。现在，两个 child 都听 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>

我希望类“but-i-will-overflow”溢出父类“ihave-overflow-hidden”。

注意:这个 html setup cann不幸的是，我不能在这里更改 html 结构，所以我必须对这些类使用纯 css(不允许:after & :before)

Answer 1

试试这个 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;
}