Como evitar que o header se sobreponha ao conteúdo em um app de Angular

ulises2010 · 29/12/2017

Estoy creando con angular una app y he puesto tres componente:

Header
content
footer

El caso es que he encontrado este ejemplo que quiero usar como header:

Bootstrap Snippet Header Top using HTML CSS | Bootsnipp.com

que es muy simple y usa estos css:

https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css

Inserir CODE, HTML ou PHP:

.menu
{
background-color: #f33155;
border-bottom: 4px solid #4f5467;
width:100%;
height: auto;
padding: 0 10px;
position: fixed;
margin: 0px;
z-index: 1;
opacity: 0.9;
}

.menu  .navbar-nav > .active > a
{
background-color : #4f5467;
color: white;
font-weight: bold;
}

.menu  .navbar-nav >  li >  a
{
font-size: 13px;
color: white;
padding: 10px 35px;

}
.menu  .navbar-nav >  li >  a:hover
{
background-color: #4f5467;
}

.navbar-header {
    padding: 10px;
}
.navbar-header > a {
    font-family: 'Ubuntu Condensed', sans-serif;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
    color: white;
    font-size: 13px;
    padding: 5px 3px;
}
.navbar-header > a:hover
{
text-decoration: none;
color: #04A3ED;
}

y este html

Inserir CODE, HTML ou PHP:

<!--header top-->
<div class="menu">
    <div class="container-fluid">
		<div class="navbar-header">
			<a href="#"><span class="glyphicon glyphicon-user"></span> Email: Ravikumar@gmail.com</a>
			<a href="#"><span class="glyphicon glyphicon-phone"></span> Mobile: 1234567890</a>
		</div>
		<div>
			<ul class="nav navbar-nav navbar-right">
				<li><a href="#" ><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
				<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
			</ul>
		</div>
	</div>
</div>
<!--end Header-->

El caso es que cuando lo pongo el header se superpone sobre el content y el footer, pero en cambio si sólo pongo este html:

Inserir CODE, HTML ou PHP:

<h1 class="header">Header</h1>

se comporta como quiero, el header arriba, luego el content y luego el footer, así que supongo que será por alguna propiedad del css, pero la verdad es que no doy con ello.... sabeis que puede ser? No pongo enlace porque lo tengo en local.

Gracias por la ayuda

Inside 3 · 29/12/2017

¿Solo metiste el h1 o lo pusiste por div's?

SnakeNet · 29/12/2017

Revisa los valores que estés usando de z-index que es el que le da mayor prioridad a uno u a otro.

ulises2010 · 29/12/2017

Inside 3 disse:
¿Solo metiste el h1 o lo pusiste por div's?

Solo el h1, aunque si lo pongo en un div se comporta igual, aunque si al div le doy clase menu ocurre otra vez... esta claro que es algo de la clase menu, pero no doy con ello.

SnakeNet disse:
Revisa los valores que estés usando de z-index que es el que le da mayor prioridad a uno u a otro.

Si que tiene el menu un z-index con valor 1, y si lo pongo a -1 se pone el content y el footer sobre él, pero yo lo que quiero es que se pongan debajo, no superpuestos

- - - Actualizado - - -

Bueno, lo encontre, pero hay algo que no entiendo..... es la propiedad

position: fixed;

Lo malo es que si la quito desaparece por completo, porque tiene también puesto :

height: auto;

Si le pongo el height: 50px; ya si se ve, pero no me gusta una propiedad así fija, me gustaría auto pero que se adaptase a lo que tiene.... ¿por qué piensa que no hay nada?

Como evitar que o header se sobreponha ao conteúdo em um app de Angular

ulises2010

Inside 3

SnakeNet

ulises2010

Tópicos similares