CSS foundation (xxi) - Position the adjusted level position

Essays and records to facilitate their access to fellow travelers, it is best to learn HTML learning CSS.

#------------------------------------------------I ------------------------------------------- dividing line is a shame

Three colors, green, black and white using the z-index to show the level of control

 

<!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>

 

effect:

z-index of the large number of the above, the above code 10 in the outermost layer and then 9

 

Guess you like

Origin www.cnblogs.com/lirongyang/p/11303779.html