Element overlapping the other CSS

Navigation
1

My site consists of a header and below it a container-fluid with the information on the screen. The problem is that my header is overlapping part of my container-fluid:

Myhtml:

<h3class="card-header primary-color white-text">Monitoramento</h3>

<div class="container-fluid">
  <form novalidate #f="ngForm">
    <div class="card">
    ...

My css: 

.card-header{
    height: 7%;
    text-align: center;
    position: fixed;
    width: 100%;
    z-index: 10;
}

I thought of adding a 7% margin-top to give the exact distance between one element and the other, but it seems to be not enough, only with 25% margin-top is done the correct distance between the elements, but according to is increasing the distance screen becomes very large and this impacts the visual. can anybody help me? If I take the position: fixed everything works as expected, but I need this title to be fixed.

    
asked by anonymous 02.10.2018 / 13:43

3 answers

3

According to the framework documentation you are using link when you set position:fixed or position:sticky to NavBar you need to put padding-top into 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.

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

Source: link (see Placement) p>     

02.10.2018 / 14:15
0

Hello, I have not tested here, but have you ever thought about z-index? This value makes it stand out from the other elements.

link

For the title to be fixed at the top just a top: 0

    
02.10.2018 / 14:02
0

I was able to solve by defining the container-fluid as position: relative and padding-top: 60px, now regardless of the resolution the elements are not overlapping.

    
02.10.2018 / 14:15
Position menu on image with CSS Implementing the Life Cycle of an Activity