[SOLUCIONADO] problemilla clase position:fixed

rafret · #1 (**permalink**) 14/09/2017, 22:17

Hola que tal buenas noches, siempre que uso position:fixed me pasa lo que se ve en la imagen. Al usar la clase, el div -en este caso header que es a la que se la aplico-, el div de abajo sube y queda como en la imagen dos.jpg. Una solución sería ponerle un margin top al div debajo, pero no me convence. Veía un tutorial justo en el que el instructor usaba la clase y al refrescar la pantalla no le pasaba lo que a mi. Pregunto, es normal ese comportamiento o es que estoy omitiendo algo?

aunque no se si sea necesario de todas maneras pongo el codigo.

Cita:

<body>
<header id="main_header">
<div class="container-fluid">
<div class="row">
<div class="col-xs-3">
<h1 id="main-logo">Presta Seguro</h1>
</div>
<div class="col-xs-9">
<nav>
<ul id="main-menu" class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nosotros</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Productos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contactenos</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>

Cita:

#main_header{position:fixed;top:0; width: 100%; z-index: 50;border-bottom:1px solid}
#main-menu{float: right}

petit89 · #2 (**permalink**) 14/09/2017, 23:05

Si usas bootstrap como veo, el cuenta con una clase que hace eso por ti... navbar fixed-top

mira el ejemplo en su documentación aqui:http://getbootstrap.com/docs/4.0/exa...bar-top-fixed/
claro puedes ver el codigo fuente

rafret · #3 (**permalink**) 14/09/2017, 23:38

Hola Petit buenas noches, estoy empezando a conocer bootstrap la verdad, quisiera preguntarte, que habría que hacer en caso no estuviera usando bootstrap, ya que en ocasiones he resuelto como decía aumentando el margin-top al div siguiente pero lo que pasa es que me crea conflicto luego con los links y con otras cosas.

Gracias

petit89 · #4 (**permalink**) 15/09/2017, 00:04

yo diria que organizar los z-index y poner un fondo independiente a tu div para que no se vea transparente, ya sea del mismo color de la web u otro que te agrade y se active cuando el div de abajo suba

rafret · #5 (**permalink**) 15/09/2017, 08:21

La solución fue darle un padding-top al body.

Gracias