z-index iframe
Ik probeer momenteel een div over een iframe heen te laten schuiven bij een mouseover. De div die er overheen moet schuiven werkt goed op het moment, echter moet deze bovenop de iframe komen. Op dit moment schuift deze steeds achterlangs.
Dit is de HTML:
Code (php)
1
2
3
4
2
3
4
<div class="ipad">
<iframe src="index.html" class="ipad_iframe" frameborder="0" scrolling="no" /></iframe>
<div id="menu"></div>
</div>
<iframe src="index.html" class="ipad_iframe" frameborder="0" scrolling="no" /></iframe>
<div id="menu"></div>
</div>
en de bijbehorende CSS:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.ipad_iframe {
width: 645px;
height: 500px;
margin-top: 50px;
position: relative;
z-index: 1;
}
#menu {
background-image: url('images/menu.png');
width: 660px;
height: 220px;
z-index: 3;
margin: -20px auto;
z-index: 9000;
-webkit-transition-property: margin-top;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-in-out;
display: block;
}
#menu:hover {
margin-top: -225px;
}
width: 645px;
height: 500px;
margin-top: 50px;
position: relative;
z-index: 1;
}
#menu {
background-image: url('images/menu.png');
width: 660px;
height: 220px;
z-index: 3;
margin: -20px auto;
z-index: 9000;
-webkit-transition-property: margin-top;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-in-out;
display: block;
}
#menu:hover {
margin-top: -225px;
}
Heeft iemand enig idee wat ik hier fout doe?
Ik heb al zoveel mogelijk met z-index proberen te werken, maar krijg dit helaas niet aan de praat...
Kan iemand hier mij misschien helpen? Alvast bedankt!
Gewijzigd op 13/06/2012 13:53:08 door Q S
Probeer je menu eens absolute te positioneren.
Q. S was me voor :P
Gewijzigd op 13/06/2012 13:53:16 door Patrick vd Pols
Ik weet niet of een gebruiker aan de knoppen/links/... zou kunnen indien er een div over staat (met hogere z-index)
@Kris: volgens mij werkt dit met pointer-events in CSS
Iemand enig idee wat ik hier fout doe?
Code (php)
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
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
.ipad {
width: 800px;
height: 626px;
margin: 0px auto;
background-image: url('images/ipad_trans.png');
z-index: 3;
}
.ipad_iframe {
width: 645px;
height: 500px;
margin-top: 50px;
position: relative;
z-index: 1;
}
#menu {
background-image: url('images/menu.png');
width: 660px;
height: 220px;
margin: -20px auto;
z-index: 2;
-webkit-transition-property: margin-top;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-in-out;
position: absolute;
}
#menu:hover {
margin-top: -225px;
}
width: 800px;
height: 626px;
margin: 0px auto;
background-image: url('images/ipad_trans.png');
z-index: 3;
}
.ipad_iframe {
width: 645px;
height: 500px;
margin-top: 50px;
position: relative;
z-index: 1;
}
#menu {
background-image: url('images/menu.png');
width: 660px;
height: 220px;
margin: -20px auto;
z-index: 2;
-webkit-transition-property: margin-top;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-in-out;
position: absolute;
}
#menu:hover {
margin-top: -225px;
}
zie ook de documentatie: (z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
.ipad {
width: 800px;
height: 626px;
margin: 0px auto;
background-image: url('images/ipad_trans.png');
z-index: 3;
position: relative;
}
width: 800px;
height: 626px;
margin: 0px auto;
background-image: url('images/ipad_trans.png');
z-index: 3;
position: relative;
}
Snap hier helemaal niks van :P
Je maakt een container met position relative.
Alles wat daarin genest is en position absolute heeft, zal die container als nieuw nulpunt zien.
Code (php)
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
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
<html>
<head>
<style>
.ipad {
width: 800px;
height: 626px;
margin: 0px auto;
background-image: url('images/ipad_trans.png');
position: relative;
overflow: hidden;
}
.ipad_iframe {
width: 645px;
height: 500px;
margin-top: 50px;
position: absolute;
z-index: 5;
background-color: #aaffaa;
}
#menu {
background-image: url('images/menu.png');
background-color: #aaaaff;
width: 660px;
height: 220px;
margin: -20px auto;
z-index: 10;
-webkit-transition-property: margin-top;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-in-out;
position: absolute;
}
#menu:hover {
margin-top: -225px;
}
</style>
</head>
<body>
<h1>Test z-index</h1>
<div class="ipad">
<iframe src="index.html" class="ipad_iframe" frameborder="0" scrolling="no" /></iframe>
<div id="menu">
<br/>
<br/>
Hello<br/>
World<br/>
</div>
</div>
</body>
</html>
<head>
<style>
.ipad {
width: 800px;
height: 626px;
margin: 0px auto;
background-image: url('images/ipad_trans.png');
position: relative;
overflow: hidden;
}
.ipad_iframe {
width: 645px;
height: 500px;
margin-top: 50px;
position: absolute;
z-index: 5;
background-color: #aaffaa;
}
#menu {
background-image: url('images/menu.png');
background-color: #aaaaff;
width: 660px;
height: 220px;
margin: -20px auto;
z-index: 10;
-webkit-transition-property: margin-top;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-in-out;
position: absolute;
}
#menu:hover {
margin-top: -225px;
}
</style>
</head>
<body>
<h1>Test z-index</h1>
<div class="ipad">
<iframe src="index.html" class="ipad_iframe" frameborder="0" scrolling="no" /></iframe>
<div id="menu">
<br/>
<br/>
Hello<br/>
World<br/>
</div>
</div>
</body>
</html>
Dit is wat ik heb op dit moment:
http://rcsdesign.nl/fout/ipad.html
Kan je er misschien even naar kijken? De mouseover menubalk moet onder de rand van de iPad doorgaan.
Code (php)
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
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
<!DOCTYPE html>
<html>
<head>
<script src="mint/?js" type="text/javascript"></script>
<meta charset="utf-8" />
<title>3D</title>
<script language="Javascript">
</script>
<style>
body { background-color: #000; margin: 0px auto; text-align: center;}
.ipad {
width: 800px;
height: 626px;
margin: 0px auto;
}
.ipad_over{
position:absolute;
top:0px;
width: 800px;
height: 626px;
background-image: url('images/ipad_trans.png');
}
.ipad_iframe {
width: 645px;
height: 505px;
margin-top: 50px;
position: relative;
background-image: url('images/background.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#menu {
background-image: url('images/menu.png');
width: 660px;
height: 220px;
margin: -20px auto;
-webkit-transition-property: margin-top;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-in-out;
position: absolute;
}
#menu:hover {
margin-top: -225px;
}
</style>
</head>
<body>
<div class="ipad">
<iframe src="test.html" class="ipad_iframe" frameborder="0" scrolling="no" /></iframe>
<div id="menu"></div>
<div class="ipad_over"></div>
</div>
</body>
</html>
<html>
<head>
<script src="mint/?js" type="text/javascript"></script>
<meta charset="utf-8" />
<title>3D</title>
<script language="Javascript">
</script>
<style>
body { background-color: #000; margin: 0px auto; text-align: center;}
.ipad {
width: 800px;
height: 626px;
margin: 0px auto;
}
.ipad_over{
position:absolute;
top:0px;
width: 800px;
height: 626px;
background-image: url('images/ipad_trans.png');
}
.ipad_iframe {
width: 645px;
height: 505px;
margin-top: 50px;
position: relative;
background-image: url('images/background.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#menu {
background-image: url('images/menu.png');
width: 660px;
height: 220px;
margin: -20px auto;
-webkit-transition-property: margin-top;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-in-out;
position: absolute;
}
#menu:hover {
margin-top: -225px;
}
</style>
</head>
<body>
<div class="ipad">
<iframe src="test.html" class="ipad_iframe" frameborder="0" scrolling="no" /></iframe>
<div id="menu"></div>
<div class="ipad_over"></div>
</div>
</body>
</html>
Gewijzigd op 14/06/2012 11:57:10 door Q S
edit: ik heb er al een! :)
Gewijzigd op 14/06/2012 12:03:19 door Reshad F
http://rcsdesign.nl/fout/ipad.html
Je ziet dat het menu nu aan de onderkant van de iPad uitsteekt. Is het mogelijk om dit onzichtbaar te maken? Dat het menu dus alleen zichbaar wordt binnen de iPad?
http://rcsdesign.nl/fout/ipad.html
Ik heb het maar even vies opgelost: een div met een zwarte achtergrond eroverheen geplakt haha