zoukankan      html  css  js  c++  java
  • 相对定位

    position 的值为 relative 时,就是开启了相对定位。

    当元素开启了定位以后,可以通过偏移量来设置元素的位置。偏移量可以通过 left、top、right、button 来设置。一般情况下,只使用两个值即可定义一个元素的位置。

    开启元素的相对定位后,如果不设置偏移量元素不会发生任何变化。

    相对定位元素相对其本身在文档流中的位置来定位。

    相对定位的元素不会脱离文档流。

    相对定位不会改变元素的性质,块元素还是块元素,内联元素还是内联元素。

    相对定位的元素会提升一个层级。也就是说会盖过之前层级的盒子。

      例子  

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <style>
                #box1{
                    width: 200px;
                    height: 200px;
                    background-color: red;
                }
                #box2{
                    width: 200px;
                    height: 200px;
                    background-color: yellow;
                }
                #box3{
                    width: 200px;
                    height: 200px;
                    background-color: blue;
                }
            </style>
        </head>
        <body>
            <div id="box1">box1</div>
            <div id="box2">box2</div>
            <div id="box3">box3</div>
        </body>
    </html>
    View Code

    设置相对定位跟偏移量。

    偏移量也可以设置为负数。

    偏移量正负效果对比:

  • 相关阅读:
    CF351A Jeff and Rounding 思维
    CF352B Jeff and Periods 模拟
    CF352A Jeff and Digits
    小B的询问 莫队分块
    小凯的疑惑 数学
    BestCoder Round #80 待填坑
    [SDOI2009]HH的项链 树状数组 BZOJ 1878
    Blocks poj 区间dp
    [USACO5.4]奶牛的电信Telecowmunication 最小割
    数位dp
  • 原文地址:https://www.cnblogs.com/xiaoxuStudy/p/13531570.html
Copyright © 2011-2022 走看看