回顾

定位
position 属性规定应用于元素的定位方法的类型
定位分为相对定位和绝对定位

层级示例

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="data: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;/*透明度opacity: 0.4;*/
}
#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;
}

效果

CSS学习16之层级相关推荐

HTML CSS 学习整理
HTML CSS 学习整理码字不易,转载请务必注明原文出处.常用单位整理,不断学习,后期的新增笔记会继续加到文章上方点击链接后退页面: 回到上一个网页这是一个简单的跳转页面操作 --修改plac ...
HTML + CSS 学习
转自:https://blog.csdn.net/weixin_44908159/article/details/107682328 https://blog.csdn.net/weixin_4490 ...
CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
CSS 学习笔记总结（借鉴黑马程序员pink老师前端入门）
1. CSS 简介 CSS 的主要使用场景就是美化网页,布局页面的 1.1 HTML 的局限性说起 HTML ,他只关注内容的语义.比如 <h1> 表明这是一个大标题,<p> ...
前端工程师高手说说CSS学习中的瓶颈
一.何为瓶颈? "瓶颈"指瓶子的颈部,相对狭窄.这是很传神的一个词,因为狭窄,因此难以突破:但是,一旦突破了,就是广阔天空(偌大瓶身)! 小弟不才,凑合画了个瓶颈示意图,如下: 图 ...
CSS学习笔记（详细，不定期更新）
CSS 学习笔记 CSS书写规范顺序布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...
HTML+CSS学习笔记(2) - 认识标签（1）转载
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 http://www.cnblogs.com/wanglongshuai/p/5204070.html@ ...
张鑫旭：说说CSS学习中的瓶颈（个人觉得对突破技术瓶颈都有思想上的指导作用）...
2019独角兽企业重金招聘Python工程师标准>>> 关于作者张鑫旭,09年华中科技大学毕业,现上海,就职于阅文集团,专注web前端偏前领域,钓鱼爱好者. 本文转载自说说CSS学 ...
算警示吧——此文来自张鑫旭（说说CSS学习中的瓶颈）
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=2523 虽已数年,但 ...

CSS学习16之层级

回顾

层级示例

CSS学习16之层级相关推荐

最新文章

热门文章