zoukankan      html  css  js  c++  java
  • css之position

    1、position:fixed

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

    (1)top:40px;距离顶部的距离为40px;left:20px;距离左边的距离为20px;

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

    执行结果如下:

  • 相关阅读:
    redhat Nginx 安装
    黑客经验谈:跳板攻击入侵技术实例解析
    Linux各版本的本地root密码破解方法
    python学习笔记
    Git 提交的正确姿势:Commit message 编写指南
    数论 + 扩展欧几里得
    数论
    flutter 延时函数delay Loading页面
    flutter 切换tab后保留tab状态
    iOS 应用"无法安装应用程序 因为证书无效"的解决方案
  • 原文地址:https://www.cnblogs.com/wuxiaoru/p/12368874.html
Copyright © 2011-2022 走看看