-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathposicionamento.html
99 lines (85 loc) · 4.29 KB
/
posicionamento.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<title>Posicionamento</title>
<style>
.box_position {
background-color: #e200ff;
width: 300px;
height: 50px;
color: #fff;
font-family: sans-serif;
padding: 20px;
font-size: 18pt;
text-align: center;
}
#static {
position: static;
}
#relative {
position: relative;
left: 200px;
}
#fixed {
position: fixed;
bottom: 15px;
right: 15px;
}
#relative_2 {
position: relative;
width: 400px;
height: 200px;
background-color: #65276d;
}
#absolute {
position: absolute;
bottom: 3px;
right: 15px;
background-color: #23197b;
}
</style>
</head>
<body>
<h1>Propriedades de posição</h1>
<p>A position propriedade especifica o tipo de método de posicionamento usado para um elemento.(estático, relativo, fixo, absoluto ou pegajoso).</p>
<p>Os elementos são então posicionados usando as propriedades superior, inferior, esquerda e direita. No entanto, essas propriedades não funcionarão, a menos que a position propriedade seja configurada primeiro. Eles também funcionam de maneira diferente dependendo do valor da posição.</p>
<h3>position:static</h3>
<p>Elementos HTML são posicionados estáticos por padrão.</p>
<p>Elementos posicionados estáticos não são afetados pelas propriedades superior, inferior, esquerda e direita.</p>
<p>Um elemento com position: static; não está posicionado de maneira especial; está sempre posicionado de acordo com o fluxo normal da página:</p>
<p>Exemplo: </p>
<div class="box_position" id="static">position: static;</div>
<br>
<hr>
<h3>position:relative;</h3>
<p>Um elemento position: relative; está posicionado em relação à sua posição normal.</p>
<p>Definir as propriedades superior, direita, inferior e esquerda de um elemento relativamente posicionado fará com que seja ajustado para longe de sua posição normal. Outro conteúdo não será ajustado para caber em qualquer lacuna deixada pelo elemento.</p>
<p>Exemplo: </p>
<div class="box_position" id="relative">position: relative;</div>
<br>
<hr>
<h3>position:fixed</h3>
<p>Um elemento com position: fixed;é posicionado em relação à viewport, o que significa que ele permanece sempre no mesmo local, mesmo que a página seja rolada. As propriedades superior, direita, inferior e esquerda são usadas para posicionar o elemento.</p>
<p>Um elemento fixo não deixa uma lacuna na página onde normalmente estaria localizado.</p>
<p>Exemplo: No canto inferior direito</p>
<div class="box_position" id="fixed">position: fixed;</div>
<br>
<hr>
<h3>position:absolute;</h3>
<p>Um elemento com position: absolute;é posicionado em relação ao ancestral posicionado mais próximo (em vez de posicionado em relação à viewport, como fixo).</p>
<p>Contudo; se um elemento posicionado absoluto não tiver antepassados posicionados, ele usará o corpo do documento e se moverá junto com a rolagem da página.</p>
<p><b>Nota:</b>Um elemento "posicionado" é aquele cuja posição é qualquer coisa exceto static.</p>
<p>Exemplo: </p>
<div class="box_position" id="relative_2">position: relativo 2 / absolute;</div>
<div class="box_position" id="absolute">position: absolute;</div>
<br>
<hr>
<h3>position:pegajosa;</h3>
<p>Um elemento com position: sticky;é posicionado com base na posição de rolagem do usuário.</p>
<p>Um elemento adesivo alterna entre relativee fixed, dependendo da posição de rolagem. Ela é posicionada relativa até que uma determinada posição de deslocamento seja atendida no navegador - então ela "gruda" no lugar (como position: fixed).</p>
<p><b>Nota:</b>Internet Explorer, Edge 15 e versões anteriores não suportam posicionamento aderente. O Safari exige um prefixo -webkit- (veja o exemplo abaixo). Você também deve especificar pelo menos um de top, right, bottomou leftpara o posicionamento pegajoso para trabalhar.</p>
<p>Exemplo: </p>
<iframe src="teste2.html" style="width: 100%; border: 4px solid #e5e5e5"></iframe>
</body>
</html>