posicionamiento - posicionar div css

Error absoluto de posicionamiento en Internet Explorer 11

Question

Tengo una página que se muestra correctamente en Google Chrome, Firefox y Opera, pero tiene un error en Internet Explorer 11.

Aquí está el HTML, con las partes innecesarias eliminadas:

<div class="container">
    <div class="page-content">
        <div id="corner"></div>
        ... page contents here
    </div>
</div>

Y aquí está el CSS:

.container {
    margin: 0;
    min-height: 100%;
    padding: 0;
}


.page-content::after {
    content: "";
    display: block;
    height: 1px;
}
.page-content {
    background: linear-gradient(137deg, transparent 121px, #ffffff 20px) repeat scroll 0 0 rgba(0, 0, 0, 0);
    margin: 190px 100px 150px;
    max-width: 64em;
    padding: 10px 120px 145px;
    z-index: 2;
}
.page-content {
    margin: auto;
    max-width: 64em;
    padding: 0 1em 1em;
}

#corner {
    background-color: #ffffff;
    background-image: url("corner.png");
    display: block;
    height: 200px;
    left: 120px;
    position: absolute;
    top: 20px;
    width: 200px;
    z-index: -1;
}

Como puede ver en esta captura de pantalla, el elemento #corner no está posicionado correctamente.

Realmente no estoy seguro de qué intentar, ya que esto es específico de Internet Explorer. He intentado diferentes cosas con el código durante las últimas dos horas sin suerte hasta ahora.

Answer 1

Por si acaso esto ayuda a alguien más:

Tuve un problema similar Parecía que ie11 estaba ignorando la propiedad ''derecha'':

right: -320px;

pero resultó ser porque había establecido la propiedad ''left'' en:

left: initial;

Resulta que la palabra clave ''inicial'' no es compatible con ie11:

izquierda: inicial no funciona en internet explorer

Answer 2

intente agregar position:relative a los elementos que contienen div#corner , .container y / o .page-content

position: relativo en un elemento contenedor establece los límites de un elemento posicionado absolutamente igual al elemento padre, en lugar de toda la página.

por lo tanto, un valor de left:0px no es igual al lado superior izquierdo de la página, sino al lado izquierdo del elemento padre.

Es un tanto sorprendente que esto solo ocurra en ie11, aunque es un problema bastante sencillo que me hace sospechar que podría haber una solución secundaria, pero nuevamente, he tenido que soportar IE desde ~ ie6. Supongo que no soy todo eso. Sorprendió si es solo IE chupando.

Answer 3

Nota al margen: no estoy seguro de si esto es lo que intentas hacer, pero min-height:100% no hace content el tamaño del content sea ​​del 100% de la altura de la pantalla. Reemplace eso con esto:

position:absolute;
top:0;
bottom:0;  
left:0;
right:0;

De todos modos, has puesto #corner a

position: absolute;
top: 20px;
left: 120px;

Y ahí es donde IE lo coloca, en relación con toda la página. Está haciendo lo que le estás diciendo que haga. Con los otros navegadores, su posición es absoluta en comparación con ese encabezado. Pero para adivinarlo, probablemente querrá configurarlo en position: relative .