使用position fixed实现层级结构，z-index、opacity的使用

当时用fixed时候，不能使用margin：0 auto来使当前标签居中了，

所以可以用;top: 50%;left:50%; margin-left: -250px;margin-top: -200px;来实现居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="display:block;z-index:8; position: fixed;top: 50%;left:50%;
    margin-left: -250px;margin-top: -200px; background-color:white;height: 400px;width:500px;
    opacity: 0.5;">

        <input type="text" />
        <input type="text" />
        <input type="text" />

    </div>

    <div style="display:block;z-index:9; position: fixed;background-color: black;
    top:0;
    /*bottom: 0;*/
    right: 0;
    left: 0;
    height: 500px;
    opacity: 0.5;
    ">123333333333333333333333333333333333333333333333333333333</div>

    <div style="height: 500px;background-color: green;">
        asdfasdf
    </div>
</body>
</html>

 

posted @ 2018-04-04 00:27  梦中琴歌  阅读(442)  评论(0)    收藏  举报