脱离父部门

我有一个类似的问题,定位胡佛文本居中下方的浮动图像按钮列表。

对我来说,解决方案是对“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>

你应该尝试使用css的 position:fixed 属性,而不是 position:absolute ,对于错误 div 位置:固定 left: 0 , right: 0 等)。然后文本对齐其中的错误消息。

我不知道你为什么想让那个div脱离父div。也许可以尝试为它们创建一个新的html结构?

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

我想只有这样 div 从所有父级中断 部门 s对所有这些问题都要有一个绝对的定位,这显然会产生自己的一系列问题。

为什么不简单地有一个预定义的,隐藏的 部门 jQuery 部门 jQuery UI 它允许您轻松地创建对话框,正常和模态,除了吨其他功能。

更新

由于JS是不允许的,一个简单的方法就是只在出现错误时显示div。所以PHP代码应该是。。。

if (isset($error)) {
    echo '<div class="show_error">' . $error . '</div>';
}

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

当然,您可以根据需要进一步设置error div的样式,但是需要这些样式来将其定位在死点。

我在这里找到了一个可靠的CSS解决方案:

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

让我们添加另一个父对象并移动位置:相对位置调平 (或者,在您的上下文中,您可以简单地使用现有的鞋面 家长)。

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

结果: