CSS - Colocar varios elementos FIXED uno debajo del otro

 
Vista:
sin imagen de perfil
Val: 17
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Colocar varios elementos FIXED uno debajo del otro

Publicado por Felipe De Jesus (7 intervenciones) el 25/01/2019 20:57:30
Hola colegas, actualmente estoy muy confundido sobre el uso de los elementos con posicionamiento "fixed", quisiera saber si hay alguna manera de ordenarlos uno debajo del otro como lo hacen los elementos de tipo bloque, esto sin colocarles manualmente la posicion con margin-top sino que realmente estén uno debajo del otro, les hice un diagrama como actualmente tengo el problema en mi pagina y al lado como realmente deberían de quedar los elementos, la opción de usar margin-top no me sirve debido que al re-dimensionar la ventana el elemento de imagen header cambia de tamaño y el sobrante del margin-top queda visible, por favor agradecería algún buen amigo que me pudiera apoyar, Gracias.
Dato extra: Eltexto fluirá por debajo de los elementos al bajar el scroll, pero debe comenzar exactamente debajo de los elementos fijados.
error

html:
<img style="position:fixed" src="#" alt="header">
<nav>
<ul "style=position:fixed">
<li><a href="#">Home</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Linkk3</a></li>
</ul>
</nav>
<div name="contenido_texto"></div>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Xavi
Val: 560
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Colocar varios elementos FIXED uno debajo del otro

Publicado por Xavi (33 intervenciones) el 26/01/2019 12:31:38
Hola Felipe, si no quieres que se sobrepongan uno encima del otro, no los pongas fixed... la manera que yo haria, seria crear un elemento fixed, y dentro de ese elemento, tus elementos, de esta manera nunca se sobrepondran... algo así:
1
2
3
4
5
6
7
8
9
<style>
#grupo {position:fixed;top:0px;left:0;width:100%;}
#grupo>div {border:1px solid;}
</style>
 
<div id="grupo">
    <div>superior</div>
    <div>inferior</div>
</div>

Te sirve?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 17
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Colocar varios elementos FIXED uno debajo del otro

Publicado por Felipe De Jesus (7 intervenciones) el 26/01/2019 22:32:54
me fue muy útil esta opción te lo agradezco bastante :D
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar