在 CSS 中,定位是指控制 HTML 元素在页面上放置的位置的一种方法。在定位属性中,有一个十分有趣的属性——z-index,可以让元素的层叠顺序发生变化,加上定位属性后,就可以通过这个属性让两个 div 元素进行重叠。
/* 定义两个 div 的样式 */ div { background-color: #f1f1f1; border: 1px solid black; width: 300px; height: 150px; padding: 10px; text-align: center; font-size: 24px; } /* 定义第一个 div 的定位 */ #div1 { position: absolute; top: 50px; left: 100px; z-index: 1; } /* 定义第二个 div 的定位 */ #div2 { position: absolute; top: 100px; left: 150px; z-index: 2; }
在这段代码中,我们定义了两个 div 元素,第一个 div 的定位属性设置为 absolute,位置为 top: 50px,left: 100px,并设置 z-index 为 1;第二个 div 的位置为 top:100px,left: 150px,并将 z-index 设置为 2。
z-index 的值决定了元素的层叠顺序,z-index 值越大的元素就会在 z-index 值小的元素上面。因此,我们在这个例子中让第一个 div 的 z-index 值比第二个小,这样第二个 div 就会覆盖在第一个 div 上面。
除此之外,我们需要定义定位属性以声明元素已脱离文档流并可以自由移动,否则 z-index 属性无效。
这样,就可达到两个 div 元素重叠的效果。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。