How to put Header on top of a DIV?

Navigation
0

How do I override the header at the top of the div, and when the div is auto scrolling, do not get the header set when scrolling down? For example: 

<!DOCTYPE html>
<html>
<head>
<style>

#titulo {
background-color: mediumorchid;
position: center;            
}
        
div {
top: inherit;
width: 300px;
height: 300px;
border: 1px solid;            
overflow: auto;
display: inline-block;
margin-left: 5px;
margin-top: 5px;
}
} 
</style>
</head>
<body>

<div>
<header id="titulo"><h1>titulo</h1></header>
<span></span>
</div>

</body>
</html>
    
asked by anonymous 23.12.2018 / 13:59

3 answers

3

First of all, there is no position: center , you can see all possible position values here .

What is causing the margin between the start of div and the tag header is h1 , which is within header .

You can simply fix overriding its default value: 

<!DOCTYPE html>
<html>
   <head>
      <style>
         #titulo {
             background-color: mediumorchid;           
         }
         #titulo > h1 {
             margin: 0; /* Aqui sobrescreve a margem padrão do h1 */
         }
         div {
             top: inherit;
             width: 300px;
             height: 300px;
             border: 1px solid;            
             overflow: auto;
             display: inline-block;
             margin-left: 5px;
             margin-top: 5px;
         } 
      </style>
   </head>
   <body>
      <div>
         <header id="titulo">
            <h1>titulo</h1>
         </header>
         <span></span>
      </div>
   </body>
</html>
    
23.12.2018 / 14:11
1

Put your div with position: relative; and header with position: absolute; : 

<!DOCTYPE html>
<html>
    <head>
        <style>
            #titulo {
                background-color: mediumorchid;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
            }

            div {
                position: relative;
                width: 300px;
                height: 300px;
                border: 1px solid;            
                overflow: auto;
                display: inline-block;
                margin-left: 5px;
                margin-top: 5px;
            }
        } 
        </style>
    </head>
    <body>
        <div>
            <header id="titulo"><h1>titulo</h1></header>
            <span></span>
        </div>
    </body>
</html>

I also put left: 0; and right: 0 to distribute header to all div .

  

When I put the header position in center, it gets positioned right

position will have no effect with center value. View this HTML documentation :

The position property:

The position property specifies the method used to position an element.

There are five different values for position :

  • static
  • relative
  • fixed
  • absolute
  • sticky
23.12.2018 / 14:17
1

The element h* ( h1 , h2 , h3 , h4 , h5 , h6 ) has standard up and down margins, is removing the top element of the div, not the header .

Instead of deleting all the margins of the element, I suggested to just remove the top margin, leaving the lower margin normal, which is a useful property for h* elements, thus doing: 

#titulo h1{
   margin-top: 0;
   text-align: center;
}
  

I've added text-align: center; to center the text if you like.   As already stated, the value center in position is invalid.

See the result: 

#titulo {
background-color: mediumorchid;
/* position: center; */
}
        
div {
top: inherit;
width: 300px;
height: 300px;
border: 1px solid;            
overflow: auto;
display: inline-block;
margin-left: 5px;
margin-top: 5px;
}


#titulo h1{
   margin-top: 0;
   text-align: center;
}
<div>
   <header id="titulo"><h1>titulo</h1></header>
   <span></span>
</div>
    
23.12.2018 / 20:06
Using two functions on the same OnClick Find the largest string using Python