打破父div

时间:2010-09-11 12:39:03

标签: css html

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

5 个答案:

答案 0 :(得分:17)

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

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

position: fixed

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

enter image description here

在这里找到了解决方案:

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>

答案 1 :(得分:3)

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

答案 2 :(得分:0)

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

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

这些可以帮助你!

答案 3 :(得分:0)

我认为让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的样式,但需要将它们定位为死点。

希望这有帮助!

答案 4 :(得分:0)

我在这里找到了可靠的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;
}

结果: enter image description here