Salir de los padres div

Question

Cuando tengo un div con position: absolute, y en él es otro div con position: absolute el div interno se colocará en el marco dado a través del div externo (envoltura). Ahora quiero crear una clase (css) llamada error_message que se ubique exactamente en el medio del centro del sitio, indiferente a donde se llama, así que necesito que salga de cada div que rodea el error_message div. ¿Cómo hago esto?

Answer 1

tuve un problema similar al colocar un texto de aspiración centrado debajo de una lista de botones de imagen flotante.

para mí la solución estaba usando el valor "fijo" para la propiedad "posición"

position: fixed 

entonces se puede posicionar su mensaje de error desde la parte superior izquierda del cuerpo de nuevo. utilizo otra envoltura Div para colocar todos los textos de aspiración central del centro.

encontrado la solución aquí:

CSS nested Div with position absolute?

el código no es el código de la imagen que se ve, la imagen es sólo para ilustración.

hoja de estilo en menos de formato (ver 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

No estoy seguro de por qué querrías que div salga del div principal. Tal vez intente trabajar en una nueva estructura html para esos?

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

Estos deben ayudarle a cabo!

Answer 3

Creo que la única manera de tener un div de todos los padres div s es tener un posicionamiento absoluto en todos ellos, lo que obviamente creará su propio conjunto de problemas.

¿Por qué no tener simplemente un div predefinido y oculto como un elemento directo del cuerpo, en lugar de envolverlo en el marcado? A continuación, puede colocarlo fácilmente como desee e insertar los mensajes de error en él con la ayuda de jQuery. Una ventaja obvia de este método es que solo tendrá que escribir esta div una vez, e insertar dinámicamente el mensaje de error en ella. Incluso sugeriría echar un vistazo a jQuery UI, que le permite crear diálogos, tanto normales como modales, además de toneladas de otras características.

---

ACTUALIZACIÓN

Desde JS no está permitido, una manera fácil de hacer esto de hecho podría estar mostrando el div sólo si hubo un error. Así que el código PHP ... Sería

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

... y la clase CSS porque sería ...

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

Por supuesto, puede favorecer el estilo del div de error como desee , pero estos son necesarios para colocarlo en el centro muerto.

Espero que esto ayude!

Answer 4

Usted debe tratar de usar la propiedad de CSS position:fixed, en lugar de position:absolute, por el error div. position:fixed posicionará un elemento basado en la ventana del navegador, sin importar dónde cae en el DOM. Si desea que se centre en la ventana, independientemente del tamaño de la ventana, puede hacer que el divisor de posición fija cubra toda la pantalla (left: 0, right: 0, etc.). y luego alinee el mensaje de error dentro del texto.