Q:

Break out of parent div's

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?

A:

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>

A:

You should try using css's position:fixed property, instead of position:absolute, for the error div. position:fixed will position an element based on the browser window, with no regard for where it falls in the DOM. If you want it to be centered in the window, regardless of window size, you could make the fixed-position div cover the entire screen (left: 0, right: 0, etc). and then text-align the error message inside of it.

