
二、CSS中的Z-index:
CSS可以處理高度、寬度、深度三個維度。如何令不同元素具有層次?簡言之,就是關于元素堆疊的次序問題。
為此,你可以為每個元素指定一個數字(z-index
)。其原理是:數字較大的元素將疊加在數字較小的元素之上。比方說,我們正在打撲克,并且拿了一手同花大順。我們可以通過為各張牌設定一個z-index
的方式來表示這手牌:
下面是如何使用Z-index來進行層次的疊加,該方法雖然簡單,但卻能應付許多情況。你可以將圖片疊加到文本之上,也可以將文本疊加到文本之上等等。
#ten_of_diamonds {
position: absolute;
left: 100px;
bottom: 100px;
z-index: 1;
}
#jack_of_diamonds {
position: absolute;
left: 115px;
bottom: 115px;
z-index: 2;
}
#queen_of_diamonds {
position: absolute;
left: 130px;
bottom: 130px;
z-index: 3;
}
#king_of_diamonds {
position: absolute;
left: 145px;
bottom: 145px;
z-index: 4;
}
#ace_of_diamonds {
position: absolute;
left: 160px;
bottom: 160px;
z-index: 5;
}
position: absolute;
left: 100px;
bottom: 100px;
z-index: 1;
}
#jack_of_diamonds {
position: absolute;
left: 115px;
bottom: 115px;
z-index: 2;
}
#queen_of_diamonds {
position: absolute;
left: 130px;
bottom: 130px;
z-index: 3;
}
#king_of_diamonds {
position: absolute;
left: 145px;
bottom: 145px;
z-index: 4;
}
#ace_of_diamonds {
position: absolute;
left: 160px;
bottom: 160px;
z-index: 5;
}
-------------------------------------------------------------
生活就像打牌,不是要抓一手好牌,而是要盡力打好一手爛牌。