-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcss_properties_positioning_absolute.html
More file actions
175 lines (122 loc) · 10.7 KB
/
css_properties_positioning_absolute.html
File metadata and controls
175 lines (122 loc) · 10.7 KB
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!doctype html>
<html>
<head>
<title>CSS: absolute positioning</title>
<link rel="stylesheet" type="text/css" href="iw_examples.css"/>
<meta charset="utf-8"/>
<style type="text/css">
.blocco {border: 2px solid black; width: 50% }
</style>
</head>
<body>
<h1 class="sezione">Posizionamento assoluto</h1>
<h2 class="sezione">Situazione normale (Posizionamento statico)</h2>
<div class="esempi">
<div class="esempio"><div class="rendering">
<div class="contenitore">
<div class="blocco" style="background: magenta; ">
blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1
</div>
<div class="blocco" style="background: red; ">
blocco 2 blocco 2 blocco 2 blocco 2 blocco 2 blocco 2 blocco 2 blocco 2 blocco 2 blocco 2 blocco 2
</div>
<div class="blocco" style="background: green; ">
blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3
</div>
</div>
</div><div class="sorgente">
</div></div>
</div>
<h2 class="sezione">Posizionamento assoluto relativo al documento</h2>
<div class="esempi">
<div class="esempio"><div class="rendering">
<div class="contenitore">
<div class="blocco" style="background: magenta; ">
blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1
</div>
<div class="blocco" style="background: red; position:absolute; top: 50px; left: 250px;">
absolute 2 absolute 2 absolute 2 absolute 2 absolute 2 absolute 2 absolute 2 absolute 2 absolute 2 absolute 2 absolute 2
</div>
<div class="blocco" style="background: green; ">
blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3
</div>
</div>
</div><div class="sorgente">
<p><div class="blocco" style="background: <span style="background-color:red; color: white">red</span>">; <span style="font-weight: bold">position:absolute</span>; top: 50px; left: 250px;">
absolute 2 absolute 2 absolute 2 absolute 2 absolute 2 absolute 2 absolute 2 absolute 2 absolute 2 absolute 2 absolute 2
</div><span class="commento"><!-- Il blocco rosso è posizionato alle coordinate 50,250 rispetto al documento, in quanto non ha contenitori che offrano riferimenti validi. --></span></p>
</div></div>
</div>
<h2 class="sezione">Posizionamento assoluto relativo a un altro elemento</h2>
<div class="esempi">
<div class="esempio"><div class="rendering">
<div class="blocco" style="background: magenta; ">
blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1
</div>
<div class="blocco" style="background: blue; position:relative;">
relative 2 relative 2 relative 2 relative 2 relative 2 relative 2 relative 2 relative 2 relative 2 relative 2
<div class="blocco" style="background: red; position:absolute; top: 0px; left: 150px;">
absolute 2 absolute 2 absolute 2 absolute 2 absolute 2 absolute 2 absolute 2 absolute 2 absolute 2 absolute 2 absolute 2
</div>
</div>
<div class="blocco" style="background: green; ">
blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3
</div>
</div><div class="sorgente">
<div class="block-container">
<p><div class="blocco" style="background: <span style="background-color:blue; color: white">blue</span>; <span style="font-weight: bold">position:relative</span>;"></p>
<div class="block-container">
<p>relative 2 relative 2 relative 2 relative 2 relative 2 relative 2 relative 2 relative 2 relative 2 relative 2 </p>
<p><div class="blocco" style="background: <span style="background-color:red; color: white">red</span>">; <span style="font-weight: bold">position:absolute</span>; top: 0px; left: 150px;">
absolute 2 absolute 2 absolute 2 absolute 2 absolute 2 absolute 2 absolute 2 absolute 2 absolute 2 absolute 2 absolute 2
</div></p>
</div>
<p></div><span class="commento"><!-- In questo caso il blocco rosso è posizionato alle coordinate 150,0 rispetto al blocco blu che lo contiene e ha un Posizionamento relativo (fittizio). --></span></p>
</div>
</div></div>
<div class="esempio"><div class="rendering">
<div class="blocco" style="background: magenta; ">
blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1
</div>
<div class="blocco" style="background: blue; position:relative;">
<div style="background: yellow; position:absolute; top: 5px; left: 5px; width: 30px;">abs</div>
<div style="background: white; margin-left: 40px; margin-top:5px;">blocco di testo blocco di testo blocco di testo blocco di testo blocco di testo blocco di testo blocco di testo</div>
</div>
<div class="blocco" style="background: green; ">
blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3
</div>
</div><div class="sorgente">
<p><span class="commento"><!-- In questo esempio mostriamo come creare due colonne in un contenitore. Il contenitore blu, posizionato in maniera relativa, ospita una colonna gialla e una bianca. Questo effetto è alla base della realizzazione di molti layout --></span></p>
<div class="block-container">
<p><div class="blocco" style="background: <span style="background-color:blue; color: white">blue</span>; <span style="font-weight: bold">position:relative</span>;"></p>
<div class="block-container">
<p><div style="background: <span style="background-color:yellow;">yellow</span>; <span style="font-weight: bold">position:absolute</span>; top: 5px; left: 5px; width: 30px;">abs</div><span class="commento"><!-- L'ampiezza della colonna sinistra è fissata, e il suo Posizionamento è assoluto. --></span></p>
<p><div style="background: <span style="background-color:white;">white</span>; margin-left: 40px; margin-top:5px;">blocco di testo blocco di testo blocco di testo blocco di testo blocco di testo blocco di testo blocco di testo</div><span class="commento"><!-- L'ampiezza della colonna destra è libera, quindi si adatterà alla larghezza del contenitore. La colonna non è posizionata, ma i suoi margini impediscono che si sovrapponga alla colonna di sinistra. In questo modo, è possibile ottenere uno pseudo-Posizionamento che lascia libera la div di estendersi fino ai margini del contenitore. --></span></p>
</div>
<p></div></p>
</div>
</div></div>
<div class="esempio"><div class="rendering">
<div class="blocco" style="background: magenta; ">
blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1 blocco 1
</div>
<div class="blocco" style="background: blue; position:relative;">
<div style="background: yellow; position:absolute; top: 5px; left: 5px; width: 30px;">abs</div>
<div style="background: white; position:absolute; top: 5px; left: 40px; ">blocco di testo blocco di testo blocco di testo blocco di testo blocco di testo blocco di testo blocco di testo</div>
</div>
<div class="blocco" style="background: green; ">
blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3 blocco 3
</div>
</div><div class="sorgente">
<div class="block-container">
<p><div class="blocco" style="background: <span style="background-color:blue; color: white">blue</span>; <span style="font-weight: bold">position:relative</span>;"></p>
<div class="block-container">
<p><div style="background: <span style="background-color:yellow;">yellow</span>; <span style="font-weight: bold">position:absolute</span>; top: 5px; left: 5px; width: 30px;">abs</div><span class="commento"><!-- L'ampiezza della colonna sinistra è fissata, e il suo Posizionamento è assoluto. --></span></p>
<p><div style="background: <span style="background-color:white;">white</span>; <span style="font-weight: bold">position:absolute</span>; top: 5px; left: 40px;">blocco di testo blocco di testo blocco di testo blocco di testo blocco di testo blocco di testo blocco di testo</div><span class="commento"><!-- La colonna destra ha ampiezza libera, ed è posizionata anch'essa in maniera assoluta, imitando la posizione ottenuta nell'esempio precedente col margine. In questo caso, però, l'effetto ottenuto NON è quello voluto! Infatti, poichè abbiamo posizionato entrambi gli elementi contenuti nel blocco blu, quest'ultimo è stato svuotato e si è "compresso", facendo scivolare in alto il blocco verde... --></span></p>
</div>
<p></div></p>
</div>
</div></div>
</div>
</body>
</html>