[CSS] Z-index vertikt het
Ik was bezig met de css voor mijn site. Maar ik had een probleem met divjes, daarom plaatste ik ze overelkaar heen en ik probeerde de z-index te gebruiken. Maar dat wil gewoon niet! Wat ik ook doe, niets lukt. Misschien weten jullie het?
URL:
http://www.wesselb.nl/new
CSS:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
#page
{
color: #fff;
background-color: #000;
height: 100%;
position: absolute;
top: 0;
left: 0;
margin: 0;
z-index: 1; /* <---- */
}
{
color: #fff;
background-color: #000;
height: 100%;
position: absolute;
top: 0;
left: 0;
margin: 0;
z-index: 1; /* <---- */
}
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
#header
{
margin: 0;
padding: 10px;
background-color: #fff;
height: 100px;
z-index: 2; /* <---- */
}
{
margin: 0;
padding: 10px;
background-color: #fff;
height: 100px;
z-index: 2; /* <---- */
}
HTML:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="header">
<div id="img">
<img src="img/star.jpg" alt="WesselB.nl!" id="img-pic">
<br />
<img src="img/txt.png" alt="WesselB.nl!" id="img-pic-2">
</div>
<div id="zoek">
<form action="zoeken.php" method="post">
<input type="text" id="zoek-balk" value="" onFocus="javascript:check_focus(this);" onBlur="javascript:check_blur(this);"><input type="submit" id="zoek-knop" value="">
</form>
</div>
</div>
<div id="gradient"></div>
<div id="page">
<div id="padd"><h1>Z-INDEX VERTIKT HET</h1>
</div>
</div>
<div id="img">
<img src="img/star.jpg" alt="WesselB.nl!" id="img-pic">
<br />
<img src="img/txt.png" alt="WesselB.nl!" id="img-pic-2">
</div>
<div id="zoek">
<form action="zoeken.php" method="post">
<input type="text" id="zoek-balk" value="" onFocus="javascript:check_focus(this);" onBlur="javascript:check_blur(this);"><input type="submit" id="zoek-knop" value="">
</form>
</div>
</div>
<div id="gradient"></div>
<div id="page">
<div id="padd"><h1>Z-INDEX VERTIKT HET</h1>
</div>
</div>
Alvast bedankt, Wessel!
Edit:
Aanvulling
De #header moet over de #page heen komen.
Aanvulling
De #header moet over de #page heen komen.
Gewijzigd op 01/01/1970 01:00:00 door Wessel Johnson
De header moet ook een position: abolute en een left en een top krijgen, anders werken z-indexen niet.
Ja! Het werkt! Bedankt Jan!