绝对位置和溢出：隐藏 [英] Absolute position and Overflow:hidden

问题描述

<div id="parent" style="overflow:hidden; position:relative;">
  <div id="child" style="position:absolute;">
  </div>
</div>

我需要显示比它的父元素大的子元素，这可能吗？
父元素具有 position：relative;
子元素一旦离开父类边界就会被删除。

I need to show child element which is bigger than it's parent element, but without removing overflow:hidden; is this possible? parent element has position:relative; child element gets stripped as soon as it's out of it's parents borders.

（元素有额外的css定义我只是把风格属性为清晰）

(elements have additional css defined I just put style attributes for clearness)

推荐答案

这是完全不可能使用父上的 overflow：hidden 和位置：relative / code> ..你可以引入一个额外的子 div 并移动 overflow：hidden

It's completely impossible to do what you want with both overflow: hidden and position: relative on the parent div.. instead you can introduce an extra child div and move overflow: hidden to that.

请参阅： http://jsfiddle.net/thirtydot/TFTnU/

HTML ：

<div id="parent">
    <div id="hideOverflow">
        <div style="width:1000px;background:#ccc">sdfsd</div>
    </div>
  <div id="child">overflow "visible"</div>
</div>

CSS：

#parent {
    position:relative;
    background:red;
    width:100px;
    height:100px
}
#child {
    position:absolute;
    background:#f0f;
    width:300px;
    bottom: 0;
    left: 0
}
#hideOverflow {
    overflow: hidden
}

这篇关于绝对位置和溢出：隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！