堆叠的递次由数值的大小决议
用数字指定z-index属性值,假如这个数值大的话,在前面,小的话则在背面。
关于赤色框,我们将z-index的值设置为10,蓝色框将z-index的值设置为100。
由于蓝色框z-index的值较大,因而它将显现在前面。
假如将蓝色框的z-index值变动为5,由于赤色框的值大于了蓝色框,因而赤色框在前
运用z-index属性时必需指定position
另外,z-index属性只能用于具有relative,absolute,fixed的位置而不能用于position:static。
怎样运用z-index属性?
基础语法
选择器{ z-index: 数值; }
我们来看细致的示例
HTML
<div class="z-index_test"> </div> <div class="z-index_test2"> </div>
CSS
.z-index_test { height: 200px; width: 200px; background-color: #FF5722; position: relative; z-index: 10; } .z-index_test2 { height: 200px; width: 200px; background-color: #03A9F4; position: absolute; top: 70px; left: 100px; z-index: 100; }
运转结果以下
本篇文章到这里就悉数完毕了,更多精彩内容人人能够关注ki4网的相干栏目教程!!!
以上就是怎样运用CSS z-index属性调解元素的堆叠的细致内容,更多请关注ki4网别的相干文章!