• 相对定位与绝对定位


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

    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;
        }
    

    初始效果:

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

  • 相关阅读:
    MCU 51-4 独立按键&编码按键
    MCU 51-3定时器
    MCU 51-2 LED and Digital tube Test
    MCU 51-1概述
    STM32的启动方式
    Java蓝桥杯——排序练习:选美大赛
    蓝桥杯——剪邮票(2016JavaB组第10题)
    蓝桥杯——压缩变换(2016JavaB组第9题)
    蓝桥杯——Java集合练习题
    蓝桥杯——螺旋折线(2018JavaB组第7题19分)
  • 原文地址:https://www.cnblogs.com/limengyi/p/6171426.html
Copyright © 2020-2023  润新知