Parent div break

Question

When I have a div with position: absolute , and in it another div with position: absolute , the inner div will be located in the frame specified through the outer (wrapper) div. Now I want to create a class (css) called error_message that positions itself exactly in the center of the middle of the site, no matter where it is called, so I need it to break out of every div wrapped around div__exchange_exchange. am i doing this

Answer 1

I had a similar problem with hoover-text positioning centered below the list of buttons with a floating image.

for me, the solution used a "fixed" value for the "position" property

 position: fixed 

you can again place the error message in the upper left of the body. I use another wrapper div to center the center of the vibrant texts.

found a solution here:

CSS nested div with absolute position?

the code is not the code in the picture that you see, the image is just for illustration.

smaller style sheet (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> 

Answer 2

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

Answer 3

I'm not sure why you want this div to come out of the parent div. Maybe try working on a new html structure for them?

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

They should help you!

Answer 4

I think the only way to infer div from all parent div is by absolute positioning for all of them, which will obviously create its own set of problems.

Why not just have a predefined hidden div as a direct child of the body, and not wrap it in markup. Then you can easily place it the way you want and insert error messages into it using jQuery . The obvious advantage of this method is that you only need to write this div once and dynamically insert the error message into it. I would even suggest taking a look at the jQuery UI , which allows you to easily create dialogs, both regular and modal, besides a ton of other functions.

---

UPDATE

Since JS is not allowed, an easy way to do this is to actually display the div only in case of an error. So the PHP code will be ...

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

... and the CSS class for it will be ...

 .show_error { width: 400px; // error element width height: 200px; // error element height position: absolute; top: 50%; left: 50%; margin-top: -100px; // minus half the height margin-left: -200px; // minus half the width } 

Of course, you can optionally format the div as you want, but this is necessary to place the dead center.

Hope this helps!

Answer 5

I found a reliable CSS solution here:

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

Let's add another parent and move the position: one level up (or, in your context, you could just use the existing top 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; } 

Result: