Html 绝对位置和溢出：隐藏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5513382/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Absolute position and Overflow:hidden
提问by Headshota
<div id="parent" style="overflow:hidden; position:relative;">
<div id="child" style="position:absolute;">
</div>
</div>
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.
我需要显示比父元素大的子元素，但不删除 overflow:hidden; 这可能吗？父元素的position:relative;子元素一旦超出其父边界就会被剥离。
(elements have additional css defined I just put style attributes for clearness)
（元素定义了额外的 css，我只是为了清晰起见而放置了样式属性）
采纳答案by thirtydot
It's completely impossible to do what you want with both overflow: hiddenand position: relativeon the parent div.. instead you can introduce an extra child divand move overflow: hiddento that.
完全不可能在父母身上overflow: hidden和position: relative父母身上做你想做的事div......相反，你可以引入一个额外的孩子div并转向overflow: hidden那个。
See: http://jsfiddle.net/thirtydot/TFTnU/
见：http: //jsfiddle.net/thirtydot/TFTnU/
HTML:
HTML：
<div id="parent">
<div id="hideOverflow">
<div style="width:1000px;background:#ccc">sdfsd</div>
</div>
<div id="child">overflow "visible"</div>
</div>
CSS:
CSS：
#parent {
position:relative;
background:red;
width:100px;
height:100px
}
#child {
position:absolute;
background:#f0f;
width:300px;
bottom: 0;
left: 0
}
#hideOverflow {
overflow: hidden
}
回答by Don
The code below works like a charm.
下面的代码就像一个魅力。
<div id="grandparent" style="position:relative;">
<div id="parent" style="overflow:hidden;">
<div id="child" style="position:absolute;">
</div>
</div>
</div>
回答by Jean-Luc Geering
I usually use overflow:hidden as clearfix. In this case, I give up and just add an additional div.
我通常使用溢出：隐藏作为清除修复。在这种情况下，我放弃并只添加一个额外的 div。
<div id="parent" style="position:relative;">
<!-- floating divs here -->
<div id="child" style="position:absolute;"></div>
<div style="clear:both"></div>
</div>
回答by PHP
Use css...
使用css...
* {margin: 0; padding: 0;}
#parent {width: auto; overflow: hidden;}
#child {position: absolute; width: auto;}
With width auto it will always append to the smallest possible size; and with the reset it will help maintain natural flow.
使用宽度自动，它将始终附加到尽可能小的尺寸；通过重置，它将有助于保持自然流动。
But if the child is bigger in any way than the parent, then it will not be possible. But with this CSS I think you will achieve what you want to the maximum of what is possible.
但是如果孩子在任何方面都比父母大，那么这是不可能的。但是有了这个 CSS，我认为你会尽可能地实现你想要的。
回答by trd
thirtydot's solution is actually a good idea.
三十点的解决方案实际上是一个好主意。
Here's a clearer example: http://jsfiddle.net/y9dtL68d/
这是一个更清晰的例子：http: //jsfiddle.net/y9dtL68d/
HTML
HTML
<div id="grandparent">
<div id="parent">
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
</div>
<div id="child">
dudes
</div>
</div>
CSS
CSS
#grandparent {
position: relative;
width: 150px;
height: 150px;
margin: 20px;
background: #d0d0d0;
}
#parent {
width: 150px;
height: 150px;
overflow:hidden;
}
#child {
position: absolute;
background: red;
color: white;
left: 100%;
top: 0;
}
回答by Ajith M
I believe, every front-end developer encountered this situation, at least once. Let's say you need to absolute position something… And then you try to move it in some direction, and boom it disappears… You forgot the parent was set to overflow:hidden and now your element is lost in the hidden infinite vacuum.There is a css trick to do this.Please find the below demo example for it...
相信每个前端开发者都遇到过这种情况，至少遇到过一次。假设你需要绝对定位某物......然后你尝试将它向某个方向移动，然后它消失......你忘记了父级被设置为溢出：隐藏，现在你的元素丢失在隐藏的无限真空中。有一个css 技巧来做到这一点。请找到下面的演示示例...
<br><br><br>
<div class="grand-parent">
<div class="parent">P
<div class="child">child</div>
</div>
</div>
css code:
.grand-parent {
width:50px;
height:50px;
position:relative;
background-color: grey;
}
.parent {
width:10px;
height:30px;
overflow:hidden;
background-color: blue;
}
.child {
position:absolute;
width:50px;
height:20px;
background-color: red;
top:-10px;
left:5px;
}
回答by Abhay Singh
I did this in a very simple way
我以一种非常简单的方式做到了这一点
<div class="rootparent">
<div class="parent">
<div class="child"></div>
</div>
</div>
.rootparent {
position:relative;
border:1px solid #ccc;
width:150px;
height:150px;
}
.parent {
overflow:hidden;
}
.child {
position: absolute;
top: -10px;
right: -15px;
width: 30px;
height: 30px;
border: 1px solid red;
}
回答by Peter Painter
The Problem has a Name: "offsetParent". As soon as an element gets the position abolute|relative or has its position/size altered by a transformation, it becomes the offsetParent of its children. The original offsetParent for all elements (and therefore the area in which overflowing content will be shown or relative to which absolute positions are given) is the viewport of the browser or the iFrame. But after an absolute or relative position had been applied to an element, ist bounding box is the new origin for positioning and clipping of all of ist children.
问题有一个名称：“ offsetParent”。一旦元素获得相对位置或通过转换改变其位置/大小，它就会成为其子元素的 offsetParent。所有元素的原始 offsetParent（因此将显示溢出内容的区域或相对于给出绝对位置的区域）是浏览器或 iFrame 的视口。但是在对元素应用绝对或相对位置之后，ist 边界框是定位和裁剪所有 ist 子元素的新原点。
In a Project, I had a 'popup' window containing a pulldown menu. The pulldown could easily extend over the limits of the window. But as soon as the window was moved (by using a transformation or relative positioning), the pulldown appeared at a wrong place (having the top-left Position of the window as additional Offset) and was clipped at the window's borders. The quick hack I used was to append the pulldown as child of Body (instead fo the window) and position it absolute, using the coordinates of the button that opens the menu (from the clientBoundingBox of the button) and the offset from the button's offsetParent) as absolute position of the pulldown. Then the Body again was the limiting area. This is, however, a bit tricky if it comes to multiple Levels of z-axis ordering (as the pulldown's z-axis is relative to Body, which might be different from the one the window has). But since the window has to be visible (therefore on top) to open the menu, this was negligible. Of course, this solution requires the use of JavaScript and cannot be done by simple CSS.
在一个项目中，我有一个包含下拉菜单的“弹出”窗口。下拉很容易超过窗口的限制。但是，一旦移动窗口（通过使用转换或相对定位），下拉菜单就会出现在错误的位置（将窗口的左上角位置作为附加偏移）并在窗口边界处被剪裁。我使用的快速技巧是使用打开菜单的按钮的坐标（来自按钮的 clientBoundingBox）和按钮的 offsetParent 的偏移量将下拉菜单附加为 Body 的子项（而不是窗口）并将其绝对定位) 作为下拉的绝对位置。然后身体再次成为限制区域。然而，如果涉及到多个级别的 z 轴排序（因为下拉的 z 轴是相对于身体的，这可能与窗口所具有的不同）。但是由于窗口必须可见（因此在顶部）才能打开菜单，因此可以忽略不计。当然，这个解决方案需要使用JavaScript，不能通过简单的CSS来完成。
You can't eat the cake andkeep it. If you take something out of the layout context, it becomes ist own, indepenent (and limited) layout 'frame'
你不能吃蛋糕并保留它。如果你从布局上下文中取出一些东西，它就会成为自己的、独立的（和有限的）布局“框架”
