•  
     

Posicionamento fixo - HTML e CSS

O posicionamento fixo fixed ancora um elemento na janela do navegador, você pode pensar nele como uma cola que ___ o elemento na tela. Se você rolar a tela para cima e para baixo, o elemento fixo fica no mesmo lugar, mesmo quando os outros elementos acompanham o movimento.

HTML

Código: Selecionar todos

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<title>Resultado</title>
</head>
<body>
<div id="outer"><div id="inner"></div></div>
</body>
</html>



CSS

Código: Selecionar todos

div{
border-radius:5px;
border:2px solid black;
}
#inner{
height:75px;
width:75px;
background-color:#547980;
position:fixed;
margin-left:200px;
}
#outer {
height:1500px;
width:150px;
background-color:#45ADA8;
position:absolute;
margin-left:100px;
}



Desloque a tela para cima e para baixo. O elemento fica fixo mesmo quando #outer sai da tela!

Demo: http://jsfiddle.net/d9o0o9zp/2/