当前阅读教程:CSS入门到精通 > 重叠的元素 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: sticky 定位 | 下一篇: CSS Overflow |
元素的定位与文档 流无关,所以它们可以覆盖页面上的其它元素 z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面) 一个元素可以有正数或负数的堆叠顺序: 实例代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS Position(定位)-重叠的元素</title> <!--定义内部样式--> <style> img{ position:absolute; left:0px;/*左边0px*/ top:0px; /*顶部0px*/ z-index:-1; } </style> </head> <body> <h1>黄菊华老师</h1> <img src="img/paper.jpg" width="100" height="140" /> <p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p> </body> </html> 效果图具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。 注意: 如果两个定位元素重叠,没有指定z - index,最后定位在HTML代码中的元素将被显示在最前面。 |
|
上一篇: sticky 定位 | 下一篇: CSS Overflow |