您现在的位置是：课程教程文章

css定位叠放次序是什么

2023-12-13 23:41课程教程文章人已围观

课程介绍: 1、 css定位叠放次序是什么课程推荐; 2、 css定位叠放次序是什么课程专题

说明

1、使用定位布局时，盒子可能会重叠。

2、z-index可以用来控制盒子的前后顺序(z轴)。值可为正整数、负整数或0，默认auto，值越大，盒子越高。

若属性值相同，则按书写顺序，后来居上。

单位不能在数字后面添加。

只有定位盒具有z-index属性。

实例

<head>
<style>
.parent{
position:relative;
width:300px;
height:300px;
border:1pxsolid#4c4c4c;
}
.box1,.box2,.box3{
position:absolute;
width:100px;
height:100px;
}

.box1{
background-color:hotpink;
}
.box2{
background-color:khaki;
}

.box3{
background-color:lightcoral;
}
</style>
</head>
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>

以上就是css定位叠放次序的介绍，希望对大家有所帮助。更多css学习指路：css教程

本文教程操作环境：windows7系统、css3版，DELL G3电脑。

课程教程：css定位叠放次序是什么

上一篇：css定位叠放次序的使用注意

下一篇：没有了