0
227
VisualizaçõesCambiando la posición relativa a las otras etiquetas en css
Tengo 3 cajas en mi página. El segundo (rojo) tiene que ser de posición fija. Si la altura de la caja verde aumenta, tiene que aumentar hacia la parte superior , no hacia la parte inferior. Así que la posición del rojo tiene que ser fijada. Además, si la altura del rojo aumenta, el amarillo tiene que avanzar hasta el fondo. ¿Cómo puedo hacer eso?
Aquí está mi código css y html:
#div1 {position:relative;top:0;bottom:0;right:0;background:green;width:100px;height:100px;} #div2 {width:100px;height:140px;position:absolu;bottom:0;left:0;background:red;} #div3 {width:100px;height:100px;position:relative;top:0;right:0;background:yellow;} <!DOCTYPE html> <html> <head> <title>HTML, CSS and JavaScript demo</title> </head> <body> <!-- Start your code here --> <div class="parent"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> </div> <!-- End your code here --> </body> </html>2 Respostas
Responde à pergunta0
En caso de duda, cree más elementos primarios o envolventes alrededor de los elementos que desea manipular.
* { box-sizing: border-box; } .parent { position: absolute; top: 0px; left: 0px; border: 5px solid #0000ffc0; width: 100%; height: auto; } #div1-wrapper { border: 2px solid lime; position: relative; top: 0; left: 0; width: 100%; height: 100px; } #div1 { position: absolute; bottom: 0px; left: 0; background: green; width: 100px; height: 20vh; } #div2-wrapper { border: 2px solid #ff3300; position: relative; top: 0; left: 0; width: 100%; height: 30vh; } #div2 { width:100px; height: 30vh; position: absolute; top: 0; left: 0; background: red; } #div3-wrapper { border: 2px solid #ffff00; position: relative; top: 0; left: 0; width: 100%; height: 100px; } #div3 { width: 100px; height: 100%; position: relative; top: 0; right: 0; background: yellow; } <body> <!-- Start your code here --> <div class="parent"> <div id="div1-wrapper"> <div id="div1"></div> </div> <div id=div2-wrapper> <div id="div2"></div> </div> <div id=div3-wrapper> <div id="div3"></div> </div> </div>Creé un envoltorio alrededor de cada uno de los elementos llamados #div. El envoltorio alrededor de #div1 es #div1-wrapper, y luego #div2-wrapper, y así sucesivamente...
Solo para asegurarse de sobrescribir cualquier estilo de posición nativo del navegador, proporcione position: en relación con cada contenedor. Con top: 0 y left: 0. Esto asegurará que cada elemento comience en el extremo izquierdo del elemento .parent y cada uno comience justo después del final del último.
Si desea que #div1 crezca y se reduzca con el tamaño de la pantalla, dele una altura en vh en lugar de píxeles. El envoltorio externo de #div1 debe ser posición: relativa, pero el elemento #div1 en sí mismo debe ser posición: absoluta. (Si intenta establecer su posición en relativa, se adherirá a la parte superior de su envoltorio, en lugar de a la parte inferior, como desee.
Dijiste que querías que el div rojo (#div2) se arreglara desde arriba, pero que pudiera crecer y encogerse por debajo. Para lograr esto, debe establecer la posición de #div2 en absoluto, sentado dentro de una posición: contenedor relativo.
También debe asegurarse de que su envoltorio (#div2-wrapper) tenga una altura establecida en vh, en lugar de píxeles. De esa manera, todo el envoltorio exterior crecerá y se encogerá. Y para que el elemento interno (#div2) crezca y se reduzca con él, establezca su altura al 100% del padre.
A continuación, configure el envoltorio #div3 en una posición relativa y una altura establecida de su elección (en este caso, 100 px).
Y, por último, establezca el #div3 (div amarillo) en altura: 100%;
Para que las interacciones sean más claras, le di al elemento .parent más externo un borde azul, le di a cada #div-wrapper un color de borde que coincida con el #div interno y configuré box-sizing: border box en todos los elementos.
0
Esto es posible con CSS simple usando algunos trucos de posicionamiento. En primer lugar, dado que todo se orienta alrededor de su div rojo, necesita que sea la piedra angular. Establecer este div en una posición relative e insertar los div restantes como elementos secundarios permitirá que todos sus elementos secundarios se posicionen de forma absoluta en relative con la ubicación de los padres.
Debido a que usar el posicionamiento absoluto como un porcentaje se basará en el tamaño de los padres posicionados relativos, podemos usar esto para adjuntar siempre el div inferior fuera de su base con position:absolute;top:100% . Esto coloca al div secundario a una distancia del 100 % de la parte superior del div principal.
Bajo esa misma lógica, podemos colocar un div siempre en la parte superior del padre usando position:absolute;bottom:100%;
Nota: cambié sus ID a clases para permitir múltiples ejemplos
.div1 { width:100px; height:140px; position:relative; top:200px; background:red; /* ignore this in a real case, these allow multiple examples to stack nicely*/ float:left; margin-left: 5px; } .div2 { width:100px; position:absolute; bottom:100%; background-color:green; } .div3 { width:100px; position:absolute; top:100%; background:yellow; } <!DOCTYPE html> <html> <head> <title>HTML, CSS and JavaScript demo</title> </head> <body> <!-- Start your code here --> <div class="div1"> <div class="div2" style="height:100px;"></div> <div class="div3" style="height:100px;"></div> </div> <div class="div1"> <div class="div2" style="height:200px;"></div> <div class="div3" style="height:200px;"></div> </div> <div class="div1" style="height:190px"> <div class="div2" style="height:120px;"></div> <div class="div3" style="height:227px;"></div> </div> <div class="div1" style="height:190px"> <div class="div2" style="height:20px;"></div> <div class="div3" style="height:360px;"></div> </div> <!-- End your code here --> </body> </html>