2

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:

inserir a descrição da imagem aqui

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.

4

2 Respostas 2

4

Segundo a documentação do framework que vc está usando https://mdbootstrap.com/ quando vc coloca position:fixed ou position:sticky na NavBar vc precisa colocar um padding-top no body

Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements.

Tradução: "As barras de navegação fixas usam position: fixed, ou seja, são extraídas do fluxo normal do DOM e podem exigir CSS personalizado (por exemplo, padding-top no <body>) para evitar a sobreposição com outros elementos."

Fonte: https://mdbootstrap.com/components/navbar/ (ver em Placement)

5
  • @Leticia obrigado! Esse tipo de problema é muito comum e acontece em outros frameworks tb tipo Bootstrap. A técnica mais comum para corrigir isso é a relatada na documentação com o padding-top no body. (o bootstrap tb indica fazer dessa maneira getbootstrap.com/docs/4.0/components/navbar/#placement )
    – hugocsl
    2/10/2018 às 12:18
  • Sim, eu utilizo o angular e não consigo definir css diretamente no body, não sei porque. Se eu definir body{padding-top: 60px} no styles.css ele não aplica no meu body. 2/10/2018 às 12:22
  • Era para funcionar... vc pode tentar com body{padding-top: 60px !important} mas pode ser que na compilação o angular remova os estilos do body... Vc pode inpecionar o body pelo DevTools do Browser e avaliar se o body está pegando algum estilo... Coloque um background-color no body tb para ver se é só o padding, ou se nem a cor de fundo ele está aceitando
    – hugocsl
    2/10/2018 às 12:25
  • eu acho que o angular remove automaticamente os estilos do body... não é a primeira vez que tento colocar diretamente algo no body :/ 2/10/2018 às 12:26
  • @Leticia Eu nunca trabalhei com angular, na verdade não entendo quase nada de JS. Mas talvez depois de executar o DOM vc pode adicionar alguma classe no Body... Se nada disso der certo acredito que um margint-top no header serja uma opção... ai se o conteúdo rolar por cima da nav é só vc colocar um z-index maior que o dos outros elemento que resolve. Esse ponto do Angular e classe no body infelizmente não sei resolver :/
    – hugocsl
    2/10/2018 às 12:29
1

Olá eu não testei aqui mais você já pensou no z-index?Esse valor faz com que ele fique a frente dos outros elementos.

https://www.w3schools.com/CSSref/pr_pos_z-index.asp

Para o titulo ficar fixo no topo basta um top:0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .