Meu site é composto por um header
e abaixo dele um container-fluid
com as informações da tela.
O problema é que o meu header
está sobrepondo parte do meu container-fluid
:
HTML:
<h3 class="card-header primary-color white-text">Monitoramento</h3>
<div class="container-fluid">
<form novalidate #f="ngForm">
<div class="card">
...
CSS:
.card-header{
height: 7%;
text-align: center;
position: fixed;
width: 100%;
z-index: 10;
}
Pensei em adicionar um margin-top: 7%
para dar a distancia exata entre um elemento e o outro, mas parece não ser suficiente, somente com margin-top: 25%
é feito a distância correta entre os elementos, mas conforme vai aumentando a tela a distância vai se tornando muito grande e isso impacta o visual.
Se eu tirar a position: fixed
tudo funciona conforme esperado, mas eu preciso que esse titulo seja fixado ao topo.