Break out of parent div's

Question

When i have a div with position: absolute, and in it is another div with position: absolute the 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?

Answer 1

i had a similar problem with positioning a hoover-text centered below a floated image button list.

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.

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

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