Element superimposing the other CSS

Asked

Viewed 15,167 times

2

My website consists of a header and below it a container-fluid with screen information.
The problem is that mine header is superimposing part of mine 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;
}

I thought I’d add one margin-top: 7% to give the exact distance between one element and the other, but it does not seem to be sufficient, only with margin-top: 25% the correct distance between the elements is made, but as the screen increases the distance becomes very large and this impacts the visual.
If I take the position: fixed everything works as expected, but I need this title fixed to the top.

html css material-design

  • You are using some Materialize framework or any other?

  • material design bootstrap

  • Would that be? https://mdbootstrap.com/material-design-for-bootstrap/ ?

  • that, that same

2 answers

4


According to the documentation of framework that you’re using https://mdbootstrap.com/ when you put position:fixed or position:sticky in NavBar you need to put a padding-top in the 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.

Translation: "Fixed navigation bars use position: fixed, i.e., they are extracted from the normal DOM flow and may require custom CSS (for example, padding-top in the <body>) to avoid overlapping with other elements."

Source: https://mdbootstrap.com/components/navbar/ (see at Placement)

  • @Leticia thanks! This type of problem is very common and happens in other frameworks tb type Bootstrap. The most common technique for correcting this is the one reported in the documentation with the padding-top on the body. (bootstrap tb indicates to do so https://getbootstrap.com/docs/4.0/components/navbar/#placement )

  • Yes, I use the angular and I can’t define css directly on the body, I don’t know why. If I set body{padding-top: 60px} in Styles.css it does not apply to my body.

  • It was supposed to work... you can try with body{padding-top: 60px !important} but it may be that in compiling angular remove body styles... You can ask the body by the Browser Devtools and evaluate if the body is getting some style... Put a background-color on body tb to see if it’s just the padding, or if even the background color it’s accepting

  • I think angular automatically removes body styles... it’s not the first time I try to put something directly in the body :/

  • @Leticia I’ve never worked with angular, in fact I don’t understand almost anything about JS. But maybe after running DOM you can add some class in Body... If none of this works I believe that a margint-top in the header is an option... if the content scrolls over the Nav it is only you put a z-index higher than the other element that solves. This point of the Angular and class in the body unfortunately I do not know how to solve :/

1

Browser other questions tagged html css material-design

You are not signed in. Login or sign up in order to post.