css z-index 的使用
生活随笔
收集整理的這篇文章主要介紹了
css z-index 的使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
z-index
屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
注意：
1 元素可擁有負的 z-index 屬性值。
2 Z-index 僅能在定位元素上奏效（例如 position:absolute;）！
z-index數值越大它的層疊等級就越高一些
一個小demo
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>body {margin: 0;}.main {width: 200px;height: 200px;background: #DD28A0;position: absolute}.main2 {width: 100px;height: 100px;background: #00d8a0;position: absolute;margin-left: 150px;}.main3{width: 50px;height: 50px;background: black;position: absolute;margin-top: 70px;margin-left: 180px;}</style><body><div class="main"></div><div class="main2"></div><div class="main3"></div></body></html>效果圖
?
白色的是背景圖片
給main2 設置z-index=100 (數值時自己隨意 給的)
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>body {margin: 0;}.main {width: 200px;height: 200px;background: #DD28A0;position: absolute}.main2 {width: 100px;height: 100px;background: #00d8a0;position: absolute;margin-left: 150px;z-index: 100;}.main3{width: 50px;height: 50px;background: black;position: absolute;margin-top: 70px;margin-left: 180px;}</style><body><div class="main"></div><div class="main2"></div><div class="main3"></div></body></html>效果圖
?
在給main設置z-index為999
效果圖
如下
總結
以上是生活随笔為你收集整理的css z-index 的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 求一个qq小清新网名。
- 下一篇： java list 常见的使用方法