zoukankan      html  css  js  c++  java
  • Css fixed和absolute定位差别

    fixed:固定定位

    absolute:绝对定位


    差别非常easy:

    1、没有滚动栏的情况下没有差异

    2、在有滚动栏的情况下。fixed定位不会随滚动栏移动而移动。而absolute则会随滚动栏移动


    能够这么理解。fixed:固定在当前window不动, absolute:会随參照对象元素的高度和宽度变化而变化


    一般fixed用在遮盖层和固定在页面某个位置,如固定在顶端的菜单条,又如弹出提示框居中显示


    以下样例但是简单測试两者之间的差别,注意拖动滚动栏看差异


    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <style>
            body {
            height:1000px;/*让窗口出现滚动栏*/
            }
            .fixed {
                position: fixed;
                left: 100px;
                right: 100px;
                top: 100px;
                bottom: 100px;
                auto;
                height: auto;
                border: 1px solid blue;
                
            }
            .absolute {
                position: absolute;
                left: 100px;
                right: 100px;
                top: 100px;
                bottom: 100px;
                auto;
                height: auto;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div class="fixed">fixed定位</div>
        <div class="absolute">absolute定位</div>
    </body>
    </html>


    效果例如以下:当滚动栏下拉时,absolute层会上移。fixed层不动




  • 相关阅读:
    布局(layout)文件图形界面不能显示:An error has occurred. See error log for more details. java.lang.NullPointe
    Mac下无法推出硬盘
    Excel导入导出数据库(MVC)
    json导入数据库
    XML导入数据库
    Excel表格导入数据库
    Lambda高级查询
    Linq高级查询
    多线程
    反射
  • 原文地址:https://www.cnblogs.com/liguangsunls/p/7041161.html
Copyright © 2011-2022 走看看