0
197
ViewsEn CSS, si el comportamiento predeterminado de posición: absoluto es mostrar: bloque, ¿por qué mi salida muestra lo contrario? [mostrar: bloque en línea]
div { width:200px; height:200px; position: absolute; } .first-container { background-color: #9AD0EC; } .second-container { background-color: red; left: 200px; } .third-container { background-color: blue; left:400px; } Incluso si anulo la propiedad de visualización para bloquear , todavía da el mismo resultado. ¿Por qué el elemento de división no bloquea el espacio delante de él? Producción : 
Más bien que :
1 answers
Answer question0
Un elemento absolutamente posicionado ya no existe en el flujo de documentos normal . En cambio, se sienta en su propia capa separada de todo lo demás. En lugar de colocar el elemento en función de su posición relativa dentro del flujo de documentos normal, especifican la distancia que debe estar el elemento desde cada uno de los lados del elemento que lo contiene. developer.mozilla.org/en-US/docs/Web/CSS/position (el "elemento contenedor" es el bloque contenedor inicial). arriba, abajo, izquierda y derecha se usan para posicionar eso en relación con el bloque contenedor.
explica la razón con tu código ---
/* when you give 'div' style like this nested div's also get position absolute*/ /* absolute positioned elements positions relative to its nearest positioned element.*/ /* then each container div's positioned relative to its nearest div */ /* comment this div style and use below div for solution. */ div { width: 200px; height: 200px; position: absolute; } /* positioned relative to upper div */ .first-container { background-color: #9ad0ec; } /* positioned relative to nearest positioned (first-container) div */ .second-container { background-color: red; left: 200px; } /* positioned relative to nearest positioned (second-container) div */ .third-container { background-color: blue; left: 200px; top: 200px; } <body> <div> <div class="first-container" /> <div class="second-container" /> <div class="third-container" /> </div> </body>necesita establecer 'superior' o 'inferior' en estilo contenedor para mostrar el resultado requerido. revisa esta caja de arena