CSS z-index Uygulamaları

www.dijitalders.com




















  
<!-- kırmızı kutu -->
        <div style="background-color:#FF6633; width:150px; height:100px; color:#ffffff; padding:10px;">
Deneme Metni 1 </div>

<!-- mavi kutu -->
        <div style="background-color:#00B8F5; width:450px; height:200px; color:#ffffff; padding:20px; position:absolute; top:60px; left:100px; z-index:10">
Deneme Metni 2 </div>
       
<!-- yesil kutu -->
        <div style="background-color:#B8F500; width:350px; height:400px; color:#ffffff; padding:20px; position:absolute; top:180px; left:80px;  z-index:7">
Deneme Metni 3 </div>

<!-- mor kutu -->
        <div style="background-color:B800F5; width:250px; height:100px; color:#ffffff; padding:20px;  position:absolute; top:260px; left:250px; text-align:center; z-index:15">
<img src="c3.jpg" width="71" height="82" /> </div>
   
www.dijitalders.com

 
www.dijitalders.com
  
<div style="width:60px; height:80px; border:1px">
<!-- cimler -->
<img src="cimler.gif" width="600" height="206" style="position:absolute; top:260px; z-index:20;" />

<!-- gokyuzu -->
<img src="gokyuzu.gif" width="600" height="356" style="position:absolute; top:20px; left:0; z-index:10;" />

<!-- gunes -->
<img src="gunes.gif" width="202" height="168" style="position:absolute; top:80px; left:50px; z-index:20;" />

<!-- agac -->
<img src="agac.gif" width="288" height="434" style="position:absolute; top:0px; left:250px; z-index:15;" />

</div>
   

CSS z-index Uygulamaları

    <div style="width:651px; border:hidden; margin:1px;">
        <div style="width:650px; height:650px; background-color:#F30; position:absolute; z-index:1;">1</div>
        <div style="width:500px; height:500px; background-color:#0F0; position:absolute; z-index:2; left:75px ;top:75px;">2</div>
        <div style="width:350px; height:350px; background-color:#93C; position:absolute; z-index:3; left:150px ;top:150px;">3</div>
        <div style="width:150px; height:150px; background-color:#FC0; position:absolute; z-index:4; left:250px ;top:250px;">4</div>
        <div style="width:30px; height:30px; background-color:#9FF; position:absolute; z-index:5; left:310px ;top:310px;">5</div>
    </div>

 

Yorumunuzu Ekleyin


Yükleniyor...
    Yükleniyor...