Home Newest Hot Active Unanswered Views Votes Tags Rank
 
Anderson

Posicionamento fixo - HTML e CSS


O posicionamento fixo fixed ancora um elemento na janela do navegador, você pode pensar nele como uma cola que prega 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

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

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/


GuruQA
GuruQA
 
 
GK

Por que Vênus é o planeta regente de touro?

MrGamingPT

Deixar IP fixo

Anderson

Modificadores PCRE - PHP

GK

Um veículo que estava estacionado dá a partida e ameaça entrar na sua frente. Nessa situação você?

hackkcfg

Sxe não instala !!

digao1909

Servidor de CS 1.6 - Caseiro

Anderson

O que é CSS?

Anderson

white-space - Quebra de linha com CSS

Anderson

Comentário em CSS

7Ouros

sXe Injected Client 15.3