打破父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嵌套Div与位置绝对？

代码不是您看到的图片中的代码,图片仅供参考.

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