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>

    执行结果如下:

  • 相关阅读:
    今天才明白VC++.net的含义: VS系列的c++编译器可以支持托管C++(类似于C#,具体请看MS在线文档),当然包括winform界面开发。
    转:ArcEngine10.0+VS2010+MFC 扫盲贴 .
    在Arcmap中加载互联网地图资源的4种方法
    JSON Web Token
    介子 官网
    Spring read-only="true" 只读事务的
    idea 修改 使用的git账号
    Redis原子计数器incr
    mysql where执行顺序
    GitLab 汉化
  • 原文地址:https://www.cnblogs.com/wuxiaoru/p/12368874.html
Copyright © 2011-2022 走看看