Html 突破父div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3691011/
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
Break out of parent div's
提问by Samuel
When i have a divwith position: absolute, and in it is another divwith position: absolutethe inner div will position in the frame given through the outer (wrapper) div.
Now i want to create a class (css) called error_message that positions itself exactly in the center middle of the site, indifferent from where the it is called, so i need it to break out of every div wrapped around the error_message div.. how do i do this?
当我有一个div与position: absolute，并在它的另一个div与position: absolute内DIV将在通过外（包装器）DIV给定框的位置。现在我想创建一个名为 error_message 的类（css），它将自己准确地定位在站点的中间位置，与它被调用的位置无关，所以我需要它打破围绕 error_message div 的每个 div .. 如何我这样做吗？
回答by c33s
i had a similar problem with positioning a hoover-text centered below a floated image button list.
我在将 hoover-text 定位在浮动图像按钮列表下方居中时遇到了类似的问题。
for me the solution was using the "fixed" value for the "position" property
对我来说，解决方案是使用“位置”属性的“固定”值
position: fixed
then you can position your error message from top left of the body again. i use another wrapper div to position all hoover texts center center.
然后您可以再次从正文的左上角定位您的错误消息。我使用另一个包装 div 来定位所有胡佛文本中心。
found the solution here:
在这里找到了解决方案：
CSS nested Div with position absolute?
the code is not the code from the picture you see, the picture is just for illustration.
代码不是您看到的图片中的代码，图片仅用于说明。
stylesheet in less format (see http://lesscss.org/)
较少格式的样式表（请参阅http://lesscss.org/）
<style>
.button
{
float: left;
position: relative;
a
{
&:hover, &:focus
{
.titlePos
{
.title
{
display: block;
}
}
}
.titlePos
{
position: fixed;
top:50%;
left:50%;
width: 400px;
margin-left: -200px;
.title
{
position:relative;
display: none;
top: 130px;
text-align: center;
}
}
}
</style>
html:
html：
<div id="wrapper">
<div id="content">
<ul>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text1</div>
</div>
</a>
</div>
</li>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text2</div>
</div>
</a>
</div>
</li>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text3</div>
</div>
</a>
</div>
</li>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text4</div>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
回答by Jeff
You should try using css's position:fixedproperty, instead of position:absolute, for the error div. position:fixedwill position an element based on the browser window, with no regard for where it falls in the DOM. If you want it to be centered in the window, regardless of window size, you could make the fixed-position div cover the entire screen (left: 0, right: 0, etc). and then text-align the error message inside of it.
您应该尝试使用 css 的position:fixed属性，而不是position:absolute，用于错误div。position:fixed将根据浏览器窗口定位元素，而不考虑它在 DOM 中的位置。如果你想让它在窗口中居中，无论窗口的大小，你可以把位置固定的DIV覆盖整个屏幕（left: 0，right: 0，等）。然后文本对齐其中的错误消息。
回答by Gerfried
I have found a solid CSS solution here:
我在这里找到了一个可靠的 CSS 解决方案：
Let's add another parent and move the position:relative one level up (or, in your context, you could maybe simply use an existing upper parent).
让我们添加另一个父级并将 position:relative 向上移动一级（或者，在您的上下文中，您可以简单地使用现有的上级父级）。
HTML
HTML
<div class="grand-parent">
<div class="parent">
<div class="child"></div>
</div>
</div>
CSS
CSS
.grand-parent {
position: relative;
}
.parent {
/*position: relative;*/
overflow: hidden;
}
.child {
position: absolute;
top: -10px;
left: -5px;
}
Result:
结果：
回答by jolt
I'm not sure why would you want that div to break out of parent div. Maybe try working on a fresh html structure for those?
我不确定您为什么希望该 div 脱离父 div。也许尝试为这些人设计一个新的 html 结构？
http://haslayout.net/css-tuts/Horizontal-Centeringand http://haslayout.net/css-tuts/Vertical-Centering
http://haslayout.net/css-tuts/Horizontal-Centering和http://haslayout.net/css-tuts/Vertical-Centering
These should help you out!
这些应该可以帮到你！
回答by Valentin Flachsel
I think the only way to have a divbreak out of all parent divs is to have an absolute positioning on all of them, which will obviously create its own set of problems.
我认为div打破所有 parentdiv的唯一方法是对所有 parent进行绝对定位，这显然会产生自己的一系列问题。
Why not simply have a pre-defined, hidden divas a direct child of the body, instead of wrapping it in the markup. You can then easily position it as you want, and insert the error messages in it with the help of jQuery. An obvious advantage to this method is that you would only have to write this divonce, and dynamically insert the error message into it. I would even suggest having a look at jQuery UIwhich allows you to easily create dialogs, both normal and modal, besides tons of other features.
为什么不简单地将一个预定义的、隐藏div为 body 的直接子代，而不是将它包装在标记中。然后，您可以轻松地根据需要定位它，并在jQuery的帮助下将错误消息插入其中。这种方法的一个明显优点是您只需编写div一次，并动态地将错误消息插入其中。我什至建议看看jQuery UI，它允许您轻松创建对话框，包括普通和模态对话框，以及大量其他功能。
UPDATE
更新
Since JS is not allowed, an easy way to do this would indeed be displaying the div only if there was an error. So the PHP code would be ...
由于不允许使用 JS，因此一种简单的方法确实是仅在出现错误时才显示 div。所以PHP代码将是......
if (isset($error)) {
echo '<div class="show_error">' . $error . '</div>';
}
... and the CSS class for it would be ...
... 而它的 CSS 类将是 ...
.show_error {
width: 400px; // error element's width
height: 200px; // error element's height
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; // minus half the height
margin-left: -200px; // minus half the width
}
Of course, you can further style the error div as you wish, but these are needed to position it dead-center.
当然，您可以根据需要进一步设置错误 div 的样式，但是需要这些来将其定位到死点。
Hope this helps !
希望这可以帮助 ！
