0
77
Visualizações3 divs seguidos con posición fija
Estoy tratando de configurar 3 divs seguidos en Flex.
FIJO 1: el div centrado debe establecerse en la position: fixed . Los otros 2 divs en ambos lados no están alineados con el div fijo centrado al desplazarse. Si configuro la position: sticky , cae a la mitad de la página en lugar de a la parte superior.
CORREGIDO 2: también coloqué un elemento de forma detrás de estos 3 divs. Los 2 divs (ambos lados) deben ir debajo de la forma establecida en z-index: -1 en ambos lados y eso no funcionó.
Los 2 divs en ambos lados tienen padding-top: 450px para mantener el contenido más bajo que el div centrado como se muestra en la captura de pantalla del prototipo.
(ACTUALIZADO) - JSFiddle para el PROBLEMA #2.
Este diseño de prototipo en Adobe XD es exactamente como debería verse:
(ACTUALIZADO) - 
¡Tu ayuda es realmente apreciada!
html, body { width: 100%; margin: 0 auto; padding: 0; background-color: #12212A; } .body-wrapper { position: absolute; margin: 0 auto; width: 100%; background: #12212A; display: flex; align-items: center; justify-content: center; } .row-profile { color: white; border: #3D4B57 solid 1px; } .body-wrapper>.row-profile { flex: 1 1 30% } #profile-left { text-align: right; padding-right: 44px; padding-top: 450px; height: 1520px; width: 455px; background-color: #12212A; } #profile-center { text-align: center; background-color: #3D4B57; padding-top: 0; top: 0; margin-top: 0; width: 366px; height: 250px; position: fixed; } #profile-right { padding-left: 44px; padding-top: 450px; height: 1520px; width: 455px; background-color: #12212A; } <div class="body-wrapper"> <div class="row-profile" id="profile-left">LEFT (content see JSFiddle link)</div> <div class="row-profile" id="profile-center">CENTER LEFT (content see JSFiddle link)</div> <div class="row-profile" id="profile-right">RIGHT (content see JSFiddle link)</div> </div>1 Respostas
Responde à pergunta0
Sobre el segundo problema: la forma en sí:
.body-wrapper::before{ content: ''; position: absolute; left: 0;right: 0; height: 200px; background: red; z-index: 10; }Agregar un índice z más alto para el elemento central lo colocará sobre la forma:
#profile-center{ z-index: 20; }Si necesita que su forma esté vinculada a la parte superior de la ventana gráfica, cambie position:absolute a position:fixed .