css - español - Extiende div niño más allá de contenedor div

position fixed css

Question

Estoy tratando de expandir esta div a través del ancho del navegador. He leído desde here que puedes usar {position:absolute; left: 0; right:0;} {position:absolute; left: 0; right:0;} {position:absolute; left: 0; right:0;} para lograr eso como en el archivo jsfiddle aquí: http://jsfiddle.net/bJbgJ/3/

Pero el problema es que mi #container actual tiene una propiedad {position:relative;} y, por lo tanto, si aplico {position:absolute} al div hijo, solo se referirá a #container . ¿Hay alguna manera de extender mi div hijo más allá del #container ?

Answer 1

Padre a position:static , hijo a position:absolute o

Padre a position:relative , hijo a position:fixed (con el lado fijo fijo, que nunca se mueve hacia abajo)

Su left: 0; right:0; left: 0; right:0; funciona con estas dos soluciones, solo tenga en cuenta que su div divisor se dibujará encima de cualquier divs debajo de él en el código, sin importar en qué propiedad de div esté configurada. Tendrá que agregar un valor de padding-top al siguiente div para compensar ( ejemplo simple en jsfiddle ), u otro div debajo que tenga el mismo comportamiento de altura que el niño ( un ejemplo mucho más detallado en codepen ), que probablemente sea No es ideal, pero funciona en html / css simple.

Answer 2

Puede intentar agregar un overflow:visible para el div padre, y luego hacer que el hijo sea más ancho que el padre.

Answer 3

Puedo pensar en cinco maneras de lograr potencialmente tu objetivo:

1. Use márgenes negativos en el elemento interno para moverlo fuera del padre

2. Use Javascript para mover el elemento interno fuera del padre.

3. Cambie el código fuente y mueva el elemento interno fuera del padre.

4. position: fixed uso position: fixed en el elemento interior. Esto permitirá que el elemento interno se rompa, pero tiene el lado negativo de que el elemento se fijará en la posición dada (nunca se moverá).

5. Eliminar la position: relative; desde el elemento padre o asigne una position: static elemento padre position: static

Answer 4

Tuve un caso en el que necesitaba hacer un carrusel y envolverlo fuera del elemento padre. Puede configurar el elemento secundario para que tenga un width: 100vw y configurar el elemento principal para que tenga un ancho máximo de una cantidad específica de píxeles ... o una cantidad calculada. Con esta configuración, nuestro componente hijo se extiende más allá del padre. JSFiddle

    .parent {
     // our parent container has 20px margins on each side so we set its max width accordingly
      max-width: calc(100vw - 20px)
    }

    .child {
      // set the child to wrap the entire viewport width. Account for any margins from the parent and offset them with a negative margin
      width: 100vw;
      transform: translateX(-20px);
    }