CSS技术可以让我们把不同的HTML元素排列在同一个页面上,同时又保持不同元素的独立性。使用CSS可以轻松地调整不同页面元素的位置、大小、颜色等属性。 这里我们将介绍如何使用CSS在页面中叠放两个di
CSS技术可以让我们把不同的HTML元素排列在同一个页面上,同时又保持不同元素的独立性。使用CSS可以轻松地调整不同页面元素的位置、大小、颜色等属性。 这里我们将介绍如何使用CSS在页面中叠放两个div元素。
/*CSS代码*/ div { width: 200px; height: 200px; border: 1px solid black; } #box1 { background-color: pink; position: absolute; top: 80px; left: 80px; z-index: 1; } #box2 { background-color: lightblue; position: absolute; top: 100px; left: 100px; z-index: 2; }
以上代码中,我们首先定义了两个具有相同尺寸和边框的div元素。然后我们分配了两个ID分别为box1和box2。层叠顺序(Z-index)属性用于指定元素的堆叠顺序,具有较高层叠顺序的元素会在页面上显示在顶部。
最后,通过使用绝对定位(position:absolute)属性,我们将box1和box2元素放置在页面的特定位置。在这个例子中,我们将box1放置在box2上方,因为它具有更轻的 z-index 值。这就是如何用CSS来实现两个div元素的叠放。
粉丝
0
关注
0
收藏
0