CSS中,我们经常需要让两个盒子重合,这样可以创建出一些很有趣的效果。那么,要怎么做呢?下面就来看看两个盒子如何重合。.box1 { position: absolute; top: 0; left:
CSS中,我们经常需要让两个盒子重合,这样可以创建出一些很有趣的效果。那么,要怎么做呢?下面就来看看两个盒子如何重合。
.box1 { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-color: #f00; z-index: 1; } .box2 { position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background-color: #0f0; z-index: 2; }
我们在这里声明了两个盒子,一个红色的盒子.box1和一个绿色的盒子.box2。
关键在于,我们在样式中使用了属性position。这个属性指定元素的定位方式。在这里,我们都用了absolute方式,这种方式将元素从文档流中拖离,而且定位相对于父元素。
注意在.box2中,我们指定了top和left属性。这些属性指定了.box2相对于其包含块的偏移量。这里我们让它往下移动了50个像素,往右移动了50个像素。
现在我们再看z-index属性。这个属性指定盒子的堆叠顺序,值越大的元素会被显示在值越小的元素上面。
通过使用position和z-index属性,我们就实现了两个盒子的重合。现在打开你的浏览器,查看一下效果吧!
粉丝
0
关注
0
收藏
0