打破父div

Question

当我有一个div position: absolute，而另一个div position: absolute时，内部div将位于通过外部（包装器）给出的帧中DIV。 现在我想创建一个名为error_message的类（css），它将自己完全定位在站点的中间位置，对它的调用位置无动于衷，所以我需要它来打破包含在error_message div中的每个div ..如何我这样做吗？

Answer 1

我在将浮动图像定位在浮动图像按钮列表下方时遇到了类似的问题。

对我来说，解决方案是使用“position”属性的“fixed”值

position: fixed

然后您可以再次从正文的左上角定位错误消息。 我使用另一个包装器div来定位所有胡佛文本中心。

在这里找到了解决方案：

CSS nested Div with position absolute?

代码不是您看到的图片中的代码，图片仅供参考。

格式较少的样式表（参见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：

<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>

Answer 2

您应该尝试使用css的position:fixed属性而不是position:absolute来处理错误div。 position:fixed将基于浏览器窗口定位元素，而不考虑它在DOM中的位置。如果您希望它在窗口中居中，无论窗口大小如何，您都可以使固定位置div覆盖整个屏幕（left: 0，right: 0等）。然后在其中对齐错误消息。

Answer 3

我不确定你为什么要让那个div打破父div。也许尝试为那些新的html结构工作？

http://haslayout.net/css-tuts/Horizontal-Centering和http://haslayout.net/css-tuts/Vertical-Centering

这些可以帮助你！

Answer 4

我认为让div突破所有父div的唯一方法就是对所有父div进行绝对定位，这显然会产生一系列问题。

为什么不简单地将预定义的隐藏div作为身体的直接子项，而不是将其包含在标记中。然后，您可以根据需要轻松定位，并在jQuery的帮助下在其中插入错误消息。此方法的一个明显优势是您只需编写此if (isset($error)) { echo '<div class="show_error">' . $error . '</div>'; } 一次，并将错误消息动态插入其中。我甚至建议你看看jQuery UI，除了大量的其他功能外，你还可以轻松创建普通和模态对话框。

---

<强>更新

由于不允许使用JS，因此只有在出现错误时才能显示div。所以PHP代码将是......

.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
}

...它的CSS类将是......

{{1}}

当然，您可以根据需要进一步设置错误div的样式，但需要将它们定位为死点。

希望这有帮助！

Answer 5

我在这里找到了可靠的CSS解决方案：

https://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent/

  

让我们添加另一个父对象并将位置：相对位置上移一个   （或者，根据您的情况，您可以简单地使用现有的鞋面   父）。

HTML

<div class="grand-parent">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

CSS

.grand-parent {
  position: relative;
}
.parent {
  /*position: relative;*/
  overflow: hidden;
}
.child {
  position: absolute; 
  top: -10px; 
  left: -5px;
}

结果：