z-index indeling

Door Robin S op 01-06-2012 11:24

1.448 views

Beste leden,

Ik probeer momenteel een soort iPad interface na te bootsen, zie voorbeeld:
http://rcsdesign.nl/test_ipad/ease2.html

Nu gaat de rode balk omhoog bij een mouseover, dit is de bedoeling, echter klopt de sortering niet hiervan.

Ik wil graag dat de rode balk voor de foto van de jungle langs gaat (zoals nu), maar achter de randjes van de iPad blijft.
Heeft iemand enig idee hoe ik dat doe?

Dit is de CSS van de iPad:

#ipad {
  background-image: url('images/ipad.png');
  width: 1100px;
  height: 626px;
  position: absolute;
  z-index: 4;
  top: 0px;
  right: 0;
  left: 0;
  margin:0 auto;
}

En de CSS van de rode balk:


#menu {
  width: 645px;
  height: 80px;
  background-color: red;
  z-index: 2;
  position: absolute;
  right: 0;
  left: 0;
  margin:450px auto;
  bottom: -380px ;
  z-index: 4;
  position: fixed ;
  -webkit-transition-property: bottom;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-out;
}

#menu:hover {
  bottom: -280px;
}

Iemand enig idee hoe ik dit voor elkaar krijg? Dit zou mij enorm helpen!

Alvast bedankt :)

Mvg,
Robin.

Jeroen VD

01-06-2012 11:52

bij mij (chrome) komt die balk niet verder dan ruwweg 20 pixels onder de iPad. hij gaat er helemaal niet achter.

maar als je de balk over de foto wilt laten gaan, maar achter de ipad, maak je zoiets: (even geen opmaak, puur z-index, en childs)


<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title> test </title>
		<style>
			#ipad {
				z-index: 200;
			}

			#iPadcontent {
				z-index: 180;
			}
	
			#balk {
				z-index: 190;
			}
		</style>
	</head>
	<body>
		<div id="ipad">
			<div id="iPadcontent">
				blababla
			</div>
		</div>

		<div id="balk">
			blablabla
		</div>
	</body>
</html>

Robin S

01-06-2012 11:58

@Jeroen: De z-index die jij aangeeft is inderdaad de bedoeling, echter wanneer de rode balk achter de rand van de iPad zit, kan ik deze op één of andere manier niet meer :hover aanroepen.

De binnenkant van de iPad is transparant (png). Ik wil graag dat als ik een mouseover doe op de rode balk dat deze binnen het transparante vlak van de iPad omhoog schuift.

Echter werkt de :hover nu helemaal niet meer, iemand enig idee?

Reageren

Inloggen om te reageren