CSS z-index Örnek

Aralık 03, 2015

htmlvecssegitimi.blogspot.com

Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz.

KAYNAK KODLARI	SONUÇ EKRANI
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>css z-index özelliği ve örnek uygulama</title> <style> #zindex1{ width:100px; height:100px; background-color:aqua; position: absolute; left: 0px; top: 0px; z-index: 1; } #zindex2{ width:100px; height:100px; background-color:yellow; position: absolute; left: 15px; top: 15px; z-index: 2; } #zindex3{ width:100px; height:100px; background-color:pink; position: absolute; left: 30px; top: 30px; z-index: 3; } div{display:inline;} </style> </head> <body> <div id="zindex1">a z-index: 1;</div> <div id="zindex2">b z-index: 2;</div> <div id="zindex3">c z-index: 3;</div> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <h2> "a" "b" "c" kutularının z-index değerleri c>b>a olduğu için C en üste, B ortada, A ise En alt katmanda göründü </h2> </body> </html>

KAYNAK KODLARI

SONUÇ EKRANI

<!DOCTYPE HTML>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <title>css z-index özelliği ve örnek uygulama</title>
  <style>
    #zindex1{
    
    width:100px;
    height:100px;
    background-color:aqua;
    position: absolute;
        left: 0px;
        top: 0px;
        z-index: 1;
    }
    #zindex2{
    width:100px;
    height:100px;
    background-color:yellow;
    position: absolute;
    
      left: 15px;
        top: 15px;
        z-index: 2;
    
    }
    #zindex3{
    width:100px;
    height:100px;
    background-color:pink;
    position: absolute;
    
      left: 30px;
        top: 30px;
        z-index: 3;
    
    }
    
    div{display:inline;}
  </style>
</head>

<body>
  <div id="zindex1">a z-index: 1;</div>
  <div id="zindex2">b z-index: 2;</div>
  <div id="zindex3">c z-index: 3;</div>
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <h2> "a" "b" "c" kutularının z-index değerleri  c>b>a olduğu için C en üste, B ortada,  A ise En alt katmanda göründü </h2>

</body>

</html>

Bu Blogda Ara

Html5 , CSS3 ve Javascript Dersleri

CSS z-index Örnek

htmlvecssegitimi.blogspot.com

HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Javascript Oyun Yapma Dersleri HTML5+CSS3

Uyurken Bile Para Kazanmak İster misin

Html belgesi yapısını anlama uygulaması

Html dersleri

Javascript ile neler yapılabilir

html nedir

CSS border-top-width Örnek

CSS border-right-color animasyon

JavaScript CSS left Örnek

JavaScript CSS content Örnek