<html>
<head>
<title>#Css z-index Izahi</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".linkler").hide();
$("#esasblok").bind("mouseover mouseout",function(){
$(".linkler").show();
}).mouseout(function(){
$(".linkler").hide();
});
});
</script>
<style type="text/css">
#esasblok{width:200px;height:200px;border:1px solid blue;position:relative;}
.linkler{position:absolute;top:0px;z-index:2;width:100%;height:25px;background:#f4f4f4;}
.sekil{position:absolute;top:0px;z-index:1;}
</style>
</head>
<body>
<div id="esasblok">
<div class="linkler"><a href="#">Facebook</a> | <a href="#">Twitter</a></div>
<div class="sekil">
<img src="http://www.wprecipes.com/wp-content/uploads/2009/03/facebook1.jpg" alt="facebook">
</div>
</div>
</body>
</html>
