Ik ben bezig met een nieuwe website en nu moet ik een aantal div's eenvoudig over elkaar heen kunnen zetten.
Ik weet dat position:absolute me de vrijheid geeft om dat te doen, maar ik ben meer opzoek naar een wat flexibelere optie.
Nu heb ik een stukje test code geschreven wat op zich redelijk goed werkt maar met als enige nadeel dat het een stuk canvas reserveert wat eigenlijk niet gebruikt wordt.
hieronder zie het resultaat van de code:
de ruimte aangegeven met a en b is de ruimte officieel gereserveerd voor de <div>'s die ik later relatief over elkaar heen zet.
Weet iemand hier een oplossing voor?
p.s. de reden dat ik geen absolute wil gebruiken is omdat ik later dynamisch elementen ertussen uit kan halen, en dat zou betekenen dat het script alle balkjes moet verplaatsen.
Ik weet dat position:absolute me de vrijheid geeft om dat te doen, maar ik ben meer opzoek naar een wat flexibelere optie.
Nu heb ik een stukje test code geschreven wat op zich redelijk goed werkt maar met als enige nadeel dat het een stuk canvas reserveert wat eigenlijk niet gebruikt wordt.
hieronder zie het resultaat van de code:
de ruimte aangegeven met a en b is de ruimte officieel gereserveerd voor de <div>'s die ik later relatief over elkaar heen zet.
Weet iemand hier een oplossing voor?
p.s. de reden dat ik geen absolute wil gebruiken is omdat ik later dynamisch elementen ertussen uit kan halen, en dat zou betekenen dat het script alle balkjes moet verplaatsen.
code:
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
| <html>
<head>
<title>Test</title>
<style type="text/css">
div.bg
{
z-index:0;
position:relative;
height:20px;
top:0px;
left:0px;
width:600px;
background-color:#ccffcc;
}
div.bar1
{
z-index:1;
position:relative;
height:20px;
top:-20px;
left:120px;
width:320px;
background-color:#ff0000;
opacity:0.6;
filter:alpha(opacity=60)
}
div.bar2
{
z-index:2;
position:relative;
height:20px;
top:-40px;
left:360px;
width:120px;
background-color:#0000ff;
opacity:0.6;
filter:alpha(opacity=60)
}
div.bar3
{
z-index:2;
position:relative;
height:20px;
top:-60px;
left:10px;
width:580px;
background-color:#000000;
opacity:0.3;
filter:alpha(opacity=30)
}
</style>
</head>
<body>
<table>
<tr>
<td style='width:600px;height:20px;background-color:#eeeeee;'>
<div class="bg">
</div>
<div class="bar1">
</div>
<div class="bar2">
</div>
</td>
</tr>
<tr>
<td style='width:600px;height:20px;background-color:#eeeeee;'>
<div class="bg">
</div>
<div class="bar1">
</div>
<div class="bar2">
</div>
<div class="bar3">
</div>
</td>
</tr>
</table>
</body>
</html> |
Little known fact about Middle Earth: The Hobbits had a very sophisticated computer network! It was a Tolkien Ring...
/u/7685/ruinmytune-60x60.png?f=community)
