H5C3基础学习总结之定位堆叠顺序及定位特殊性
2022/2/3 23:49:14
本文主要是介绍H5C3基础学习总结之定位堆叠顺序及定位特殊性,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
定位堆叠顺序
在使用定位布局的时候,可能会出现盒子重叠的情况。此时,可以使用z-index来控制盒子的前后持续。(参考为坐标轴的Z轴)
语法:
选择器 {
z-index: 1;
}
注意细节:
- 数字可以是正整数、负整数或是0,默认为auto。数字越大,盒子越靠山。
- 如果属性值相同,则按照书写顺序,后来居上。
- 数字后面不加单位。(表示等级的意思)
- 只有定位的盒子才有z-index属性
代码示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>定位的堆叠顺序</title> <style> .box { position: absolute; top: 0; left: 0; width: 200px; height: 200px; } .xiongda { background-color: red; z-index: 1; } .xionger { background-color: green; left: 50px; top: 50px; z-index: 2; } .qiangge { background-color:blue; left: 100px; top: 100px; } </style> </head> <body> <div class="box xiongda">熊大</div> <div class="box xionger">熊二</div> <div class="box qiangge">光头强</div> </body> </html>
定位特殊性
绝对定位和固定定位和浮动类似。
- 行内元素添加绝对定位或者固定定位,可以直接设置高度和宽度。
- 块级元素添加绝对或者固定定定位,如果不设置宽度或高度,默认大小事内容的大小。
代码示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>定位的特殊特性</title> <style> span { position: absolute; top: 300px; width: 200px; height: 150px; background-color: pink; } div { position: absolute; background-color: skyblue; } </style> </head> <body> <span>123</span> <div>abcd</div> </body> </html>
这篇关于H5C3基础学习总结之定位堆叠顺序及定位特殊性的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-13PingCAP 戴涛:构建面向未来的金融核心系统
- 2024-05-09flutter3.x_macos桌面os实战
- 2024-05-09Rust中的并发性:Sync 和 Send Traits
- 2024-05-08使用Ollama和OpenWebUI在CPU上玩转Meta Llama3-8B
- 2024-05-08完工标准(DoD)与验收条件(AC)究竟有什么不同?
- 2024-05-084万 star 的 NocoDB 在 sealos 上一键起,轻松把数据库编程智能表格
- 2024-05-08Mac 版Stable Diffusion WebUI的安装
- 2024-05-08解锁CodeGeeX智能问答中3项独有的隐藏技能
- 2024-05-08RAG算法优化+新增代码仓库支持,CodeGeeX的@repo功能效果提升
- 2024-05-08代码报错不用愁,CodeGeeX一键完成代码修复、错误解释的功能上线了!