Penjelasan Z-Index pada CSS

ketika kita membuat elemen bertumpuk, kita harus mengatur mana widget yang di atas dan di bawah. di CSS kita mengatur tumpukan widget dengan menggunakan z-index. semakin besar angka z-index maka ia akan semakin di atas. 
.wrapper{
    width: 1125px;
    margin: 0 auto;
    z-index: 1;
}
.topnav{
    position: fixed;
    left: 0;
    right: 0;
    background: #222;
    padding: 4px 0;
    z-index: 2;
}
bisa dilihat kalau wrapper berada ditumpukan paling bawah, dan topnav berada diatas nya. nominal angka yang dipilih bebas. walaupun begitu akan menjadi lebih mudah bila angka diurutkan secara berurut, agar mudah dilihat ketika ada update atau perbaikan. ini adalah contoh nilai z-index yang dipilih secara bebas.
.wrapper{
    width: 1125px;
    margin: 0 auto;
    z-index: 3;
}
.topnav{
    position: fixed;
    left: 0;
    right: 0;
    background: #222;
    padding: 4px 0;
    z-index: 20;
}