CSS基础（二十一）--Position之调整层级位置

随笔记录方便自己和同路人查阅，学习CSS时最好先学会HTML。

#------------------------------------------------我是可耻的分割线-------------------------------------------

三种颜色，绿色、黑色和白色使用z-index来控制层级显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="z-index:10; position: fixed;top: 50%;left:50%;
    margin-left: -250px;margin-top: -200px; background-color:white;height: 400px;width:500px; ">
        <input type="text" />
        <input type="text" />
        <input type="text" />
    </div>
    <div style="z-index:9; position: fixed;background-color: black;
    top:0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0.5;
    "></div>
    <div style="height: 5000px;background-color: green;">
        asdfasdf
    </div>
</body>
</html>

效果：

CSS基础（二十一）--Position之调整层级位置

z-index的数那个大那个在上面，以上代码10 在最外层然后是9