HTML
<div class="header">
</div>
<nav>
吸顶的头
</nav>
<div class="content">
</div>
<footer>
底部
</footer>
CSS
.header {
width:100%;
height:160px;
background:#87CEEB;
}
nav {
width:100%;
height:100px;
position:sticky;
top:0px;
background:#F98202;
}
.content {
width:100%;
background:blue;
height:1000px;
}
footer {
background:#87CEEB;
}
{ / Valor padrão. Nenhum elemento de posicionamento aparece no fluxo normal (ignorado ou instrução). / / Posicionamento relativo do elemento gerador, posicionamento relativo à sua posição normal. / / Gerar um elemento de posicionamento absoluto em relação ao primeiro elemento de posicionamento diferente de um posicionamento pai. / / Gerar posicionamento absoluto de elementos em relação ao posicionamento da janela do navegador. / / As provisões devem ser herdadas do valor do elemento pai da propriedade. / / A palavra-chave é usada para definir o valor padrão do atributo, podendo ser aplicada a qualquer estilo. (IE não suporta esta palavra-chave) / / palavras-chave podemos simplesmente ser entendidos como não definidos. Na verdade, são as palavras-chave e combinações. / / Pode ser implementado "pegajoso", indicando o deslocamento / }
position: static;top, bottom, left, rightz-index
position: relative;
position: absolute;static
position: fixed;
position: inherit;position
position: initial;CSSCSS
position: unset;initialinherit
position: sticky;
adorar