1

Como faço para encostar o header na parte superior da div, sendo que a div quando estiver com scroll em auto, não ficar fixo o header quando descer o scroll? Pois quando coloco a position do header em center, ele fica posicionado certo, mas não encosta na parte superior da div: Segue o código.

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

3 Respostas 3

4

Primeiramente, não existe position: center, você pode ver todos os possiveis valores do position aqui.

O que está causando a margem entre o inicio da div e a tag header é o h1, que se encontra dentro da header.

Você pode consertar simplesmente sobreescrevendo seu valor padrão:

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

Coloque sua div com position: relative; e o header com 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>

Coloquei também left: 0; e right: 0 para distribuir o header por toda a div.

quando coloco a position do header em center, ele fica posicionado certo

position não terá efeito algum com valor center. Veja esta documentação do HTML (em tradução livre):

A propriedade position:

A propriedade position especifica o método usado para o posicionamento de um elemento.

São cinco valores diferentes para o position:

  • static
  • relative
  • fixed
  • absolute
  • sticky
1

O elemento h* (h1, h2, h3, h4, h5 e h6) possui margens-padrão para cima e para baixo, e a margem de cima é que está afastando o elemento to topo da div, não o header.

Em vez de eliminar todas as margens do elemento, eu sugeria retirar apenas a margem superior, deixando a margem inferior normal, que é uma propriedade útil para elementos h*, fazendo assim:

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

Adicionei text-align: center; para centralizar o texto, caso queira. Como já disseram, o valor center em position é inválido.

Veja o resultado:

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

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 .