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层不动




  • 相关阅读:
    编程习题05
    java初始化顺序
    项目开发问题
    hibernate相关知识
    工作使用到的SQL语句
    对于时间的灵活操作
    StringBuffer 和 StringBuilder的区别
    在WebService中处理IP地址
    使用web创建监听器
    工作笔记系列-学习的零零碎碎的技术
  • 原文地址:https://www.cnblogs.com/liguangsunls/p/7041161.html
Copyright © 2011-2022 走看看