css之position

1、position：fixed

该属性是 固定在浏览器的某个位置，针对的是全局

（1）top:40px;距离顶部的距离为40px；left:20px;距离左边的距离为20px；

<body>
    <div style="width: 40px;height: 25px;background-color: black;color: white;
    position:fixed;
    top:40px;
    left:20px;
    ">返回</div>
    <div style="height:500px;background-color:#dddddd">123</div>
</body>

执行结果如下：

（2）以下还是一个position：fixed的例子：

在position:fixed;中使用margin:0 auto（居中）失效。

margin-top:50px;为body距离头部50px；
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
        height:48px;
        background-color:red;
        color:#dddddd;
        position:fixed;
        top:0;
        left:0;
        right:0;
        }
        .pg-body{
        background-color: #dddddd;
        height: 500px;
        margin-top:50px;
        }
    </style>
</head>
<body>
    <div class="pg-header">头部</div>
    <div class="pg-body">内容</div>
</body>

执行结果如下：

2、position:relative;position:absolute;

这两个属性一般配合使用，relative在浏览器固定一个大的框架；absolute在这个框架中固定某个位置

margin:0 auto；居中

为了好区分，我在此加了p标签

<body>
    <div style="position:relative;border:1px red solid;width:300px;height:60px;margin:0 auto">
        <div style="position:absolute;left:0;bottom:0;width:30px;height:30px;background-color:blue">
        </div>
    </div>
　　<p></p>
    <div style="position:relative;border:1px red solid;width:300px;height:60px;margin:0 auto">
        <div style="position:absolute;right:0;top:0;width:30px;height:30px;background-color:blue">
        </div>
    </div>
</body>

执行结果如下：relative为外边红色的边框及边框里面；position为蓝色小块

3、position之三层背景

z-index; 谁的div的该值大，哪个div的背景在上面；

opacity:0.5;设置当前背景的透明度，该值越小越透明；

display:none;可以隐藏某个背景

在position:fixed;中使用margin:0 auto（居中）失效。

<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;">     <!-- 由于margin：0 auto在position:fixed;中使用失效；   故使用top:50%,left:50%想要使其居中，发现这两个属性是使白色方框块的左上定点居中，要想使其整体居中，在向左退250px，向上退200px，使用margin-left:-250px-
        <input type="text"/>
        <input type="text"/>
        <input type="text"/>
    </div>
    <div style="z-index:8;position:fixed;background-color:black;
    top:0;
    bottom:0;
    right:0;
    left:0;
    opacity:0.4">
    </div>
    <div style="height:500px;background-color:green">
        123456
    </div>
</body>

执行结果如下：

posted @ 2020-02-26 20:35  凸凸yolotheway  阅读(193)  评论(0)    收藏  举报