How to pull Header over the top of a DIV?

Asked

Viewed 650 times

1

How do I touch the header to the top of the div, and when the div is scrolled in auto, it doesn’t fix the header when scrolling down? Because when I put the header position in center, it is positioned right, but does not touch the top of the div: Follow the code.

<!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>

html css

3 answers

4


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

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

You can fix by simply overwriting your 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>

2

Put your div with position: relative; and the 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 the header throughout the div.

when I place the header position in the center, it is positioned right

position will not have any effect with value center. View this HTML documentation (in free translation):

The estate position:

The estate position specifies the method used for positioning an element.

There are five different values for the position:

  • static
  • relative
  • fixed
  • absolute
  • sticky

1

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

Instead of removing all margins from the element, I would suggest removing only the upper margin, leaving the normal lower margin, which is a useful property for elements h*, doing so:

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

I added text-align: center; to center the text, if you like. As I said, 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>

Browser other questions tagged html css

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