css - primer - padre de un div

padre e hijo con posición fija, desbordamiento de padres: error oculto

Question

No sé si hay un problema, pero me preguntaba por qué el overflow:hidden no funciona en el elemento principal fixed / secundario.

Aquí hay un ejemplo:

CSS y HTML:

.parent{
  position:fixed;
  overflow:hidden;
  width:300px;
  height:300px;
  background:#555;
}
.children{
  position:fixed;
  top:200px;
  left:200px;
  width:150px;
  height:150px;
  background:#333;
}

<div class="parent">
  <div class="children">
  </div>
</div>

Demostración en vivo: jsFiddle

Answer 1

Como alternativa al uso de clip, también puede usar {border-radius: 0.0001px} en un elemento principal. Funciona no solo con elementos posicionados absolutos / fijos.

Answer 2

Debido a que un elemento de posición fijo se fija con respecto a la ventana gráfica, no es otro elemento. Por lo tanto, dado que la ventana gráfica no está cortándola, el desbordamiento se vuelve irrelevante.

Mientras que la posición y las dimensiones de un elemento con posición: absoluta son relativas a su bloque contenedor, la posición y las dimensiones de un elemento con posición: fija son siempre relativas al bloque contenedor inicial. Esta es normalmente la ventana gráfica: la ventana del navegador o el cuadro de la página del papel.

ref: http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Fixed_positioning

Answer 3

Los elementos de posición fijos están ubicados en relación con la ventana del navegador, por lo que el elemento principal es básicamente irrelevante.

Para obtener el efecto que desea, donde el overflow en el elemento primario corta al elemento secundario, use position: absolute lugar: http://jsfiddle.net/DBHUv/1/

Answer 4

Podría considerar usar el clip: rect(top, right, bottom, left); CSS clip: rect(top, right, bottom, left); para cortar un elemento posicionado fijo a un padre. Vea la demostración en http://jsfiddle.net/lmeurs/jf3t0fmf/ .

¡Cuidado, úsalo con cuidado!

Aunque el estilo de clip es ampliamente compatible, las principales desventajas son las siguientes:

1. La posición del padre no puede ser estática o relativa (se puede usar un padre absolutamente posicionado dentro de un contenedor relativamente posicionado);
2. Las coordenadas rect no admiten porcentajes, aunque el valor auto es igual al 100% , es decir. clip: rect(auto, auto, auto, auto); ;
3. Las posibilidades con elementos secundarios están limitadas en al menos IE11 y Chrome34, es decir. no podemos establecer la posición de los elementos secundarios en relativa o absoluta o usar una transformación CSS3 como una escala.

Ver http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/ para más información.

EDITAR: Chrome parece manejar el posicionamiento y las transformaciones de CSS3 en elementos secundarios mucho mejor cuando se aplica backface-visibility , por lo que solo para asegurarnos de que agregamos:

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

al elemento secundario principal.

También tenga en cuenta que no es totalmente compatible con navegadores antiguos / móviles o podría requerir un esfuerzo extra. Vea nuestra implementación para el menú en bellafuchsia.com .

1. IE8 muestra bien el menú, pero no se puede hacer clic en los enlaces de menú;
2. IE9 no muestra el menú debajo de la tapa;
3. iOS Safari <5 no muestra bien el menú;
4. iOS Safari 5+ repinta el contenido recortado en desplazamiento después de desplazarse;
5. FF (al menos 13+), IE10 +, Chrome y Chrome para Android parecen jugar bien.

EDITAR 2014-11-02: la URL de demostración se ha actualizado.

Answer 5

Si desea ocultar el desbordamiento en elementos de posición fija, el enfoque más simple que he encontrado es colocar el elemento dentro de un elemento contenedor y aplicar position:fixed y overflow:hidden a ese elemento en lugar del elemento contenido (debe eliminar position:fixed desde el elemento contenido para que esto funcione). El contenido del contenedor fijo se debe recortar como se esperaba.

En mi caso, estaba teniendo problemas para usar object-fit:cover en un elemento de posición fija (se derramaba fuera de los límites del cuerpo de la página, independientemente del overflow:hidden ). Colocarlo dentro de un contenedor fijo con overflow:hidden en el contenedor solucionó el problema.

Answer 6

Tuve un problema similar, bastante complejo con un diseño fluido, donde la columna derecha tenía un ancho fijo y la izquierda tenía un ancho flexible. Mi contenedor fijo debe tener el mismo ancho que la columna flexible. Aquí está mi solución:

HTML

<div id="wrapper">
    <div id="col1">
    <div id="fixed-outer">
        <div id="fixed-inner">inner</div>
    </div>
    COL1<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    <div id="col2">COL2</div>
</div>

CSS

    #wrapper {
    padding-left: 20px;
}

#col1 {
    background-color: grey;
    float: left;
    margin-right: -200px; /* #col2 width */
    width: 100%;
}

#col2 {
    background-color: #ddd;
    float: left;
    height: 400px;
    width: 200px;
}

#fixed-outer {
    background: yellow;
    border-right: 2px solid red;
    height: 30px;
    margin-left: -420px; /* 2x #col2 width + #wrapper padding-left */
    overflow: hidden;
    padding-right: 200px; /* #col2 width */
    position: fixed;
    width: 100%;
}

#fixed-inner {
    background: orange;
    border-left: 2px solid blue;
    border-top: 2px solid blue;
    height: 30px;
    margin-left: 420px; /* 2x #col2 width + #wrapper padding-left */
    position: absolute;
    width: 100%;
}

Demostración en vivo : http://jsfiddle.net/hWCub/

Answer 7

Actualización 2016:

Puede crear un nuevo contexto de apilamiento, como se ve en Coderwall :

<div style="transform: translate3d(0,0,0);overflow:hidden">
   <img style="position:fixed; ..." />
</div>

Que se refiere a http://dev.w3.org/csswg/css-transforms/#transform-rendering

Para los elementos cuyo diseño se rige por el modelo de caja de CSS, cualquier valor que no sea ninguno para la transformación da como resultado la creación de un contexto de apilamiento y un bloque contenedor. El objeto actúa como un bloque contenedor para descendientes posicionados fijos.