生活随笔
收集整理的這篇文章主要介紹了
CSS学习16之层级
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
回顧
定位
position 屬性規(guī)定應用于元素的定位方法的類型
定位分為相對定位和絕對定位
層級示例
z-index 屬性
z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
Z-index 可用于將在一個元素放置于另一元素之后。
html
<!DOCTYPE html
>
<html lang
="en">
<head
><meta charset
="UTF-8"><title
>層級z
-index
</title
><link rel
="stylesheet" href
="css/style.css">
</head
>
<body
><div id
="app1"><ul id
="ul1"><li
><img src
="images/桐老爺tx.jpeg" alt
=""></li
><li id
="tipText">刀劍神域桐老爺
</li
><li id
="tipBg"></li
><li
>Alice默默祝福
</li
><li
>時間：
2022-2-14</li
></ul
>
</div
>
<hr
>
<div id
="app2"><ul id
="ul2"><li id
="tipText2">刀劍神域桐老爺
</li
><li
>Alice默默祝福
</li
><li
>時間：
2022-2-14</li
></ul
>
</div
>
css
div[id^=app]{border: 2px black solid
;
}
#ul1 li{margin: 0
;padding: 0
;list-style: none
;
}
#app1{margin: 0
;padding: 0
;overflow: hidden
;width: 180px
;height: 220px
;font: 20px bold
;line-height: 20px
;
}
#ul1{position: relative
;margin: 0
;padding: 0
;
}
#tipBg,#tipText{text-align: center
;position: absolute
;width: 175px
;height: 20px
;bottom: 40px
;line-height: 20px
;
}
#tipBg{background: red
;
}
#tipText{color: white
;z-index: 99
;
}
#app2{margin: 0
;padding: 0
;overflow: hidden
;width: 180px
;height: 220px
;font: 20px bold
;line-height: 20px
;background-image: url("../images/桐老爺tx.jpeg");background-repeat: no-repeat
;position: relative
;
}
#ul2 li{margin: 0
;padding: 0
;list-style: none
;
}
#ul2{margin: 0
;padding: 0
;position: absolute
;bottom: 4px
;left: -1px
;
}
#tipText2{text-align: center
;width: 175px
;height: 20px
;line-height: 20px
;background: red
;color: white
;
}
效果
總結(jié)
以上是生活随笔為你收集整理的CSS学习16之层级的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
