• 相对定位与绝对定位


    要想分清相对定位和绝对定位的差别,需要着眼于两点:移动的参照物和对普通文档流的影响。

    1、移动的参照物

    相对定位是“相对于”元素(本身)在文档流中的初始位置;而绝对定位是“相对于”距离它最近的已定位祖先元素(即设置了position样式属性的祖先元素),如果不存在已定位的祖先元素,那么相对于初始包含块(即浏览器)。

    2、对普通文档流的影响

    在使用相对定位是,无论是否移动,元素仍然占据原来的空间。
    而与之相反,绝对定位使元素的位置与文档流无关,因此不占据空间。普通文档流中其它元素的布局就像绝对定位的元素不存在时一样。

    看例子:

    html结构

    	<div class="wrapper">
            <div class="box"></div>
            <div class="box relative">relative</div>
            <div class="box"></div>
        </div>
    
        <div class="wrapper">
            <div class="box"></div>
            <div class="box absolute">absolute</div>
            <div class="box"></div>
        </div>
    

    初始css代码

    	.wrapper{
            600px;
            border:1px dotted black;
            height:300px;
            position: relative;
        }
        .box{
            150px;
            height:100px;
            margin:10px;
            border:1px solid green;
            float: left;
        }
    

    初始效果:

    定位css代码

    	.relative{
            position: relative;
            left:30px;
            top:30px;
        }
        .absolute{
            position: absolute;
            left:30px;
            top:30px;
        }
    

    初始效果:

    以上为个人见解,望指教。

  • 相关阅读:
    词频统计
    第二周每周例行报告
    事务管理(ACID)
    Redis
    jar包和war包的区别
    CSS实现Loading加载动画
    如何实现“返回顶部”的页面效果
    PHP页面跳转-常见方法
    局域网络调试方式
    Thinkphp 统计数据库字段总值
  • 原文地址:https://www.cnblogs.com/limengyi/p/6171426.html
Copyright © 2020-2023  润新知