css中position定位

css中有三种定位：static、fixed、relative、absolute

• static是正常定位
• fixed 为固定定位 相对于浏览器窗口进行定位
• relative为 相对定位，相对于元素本身的位置进行定位，它原本所占的空间仍然会保留
• absolute为绝对定位，相对于static定位以外的第一个有定位的祖先元素进行定位

    <!-- html -->
    <div class="header">haha</div>
    <!-- fixed 相对于浏览器窗口进行定位 -->
    <div class="fixed">
        fixed
    </div>
    <!-- relative 相对定位 相对于元素本身的位置进行定位，它原本所占的空间仍然会保留 -->
    <div class="relative">
        relative
    </div>
    <!-- absolute 绝对定位，相对于static定位以外的第一个有定位的祖先元素进行定位 -->
    <div class="absolute-box">
        <div class="absolute">
            absolute
        </div>
    </div>
    
      <!-- css -->
        * {
            margin: 0;
            padding: 0;
        }

        .header {
            width: 100%;
            height: 500px;
            background-color: #03A9F4;
            color: #fff;
        }

        .fixed {
            position: fixed;
            top: 0;
            right: 0;
        }

        .relative {
            position: relative;
            top: 0;
            right: 0;
        }

        .absolute-box {
            position: relative;

        }

        .absolute-box .absolute {
            position: absolute;
            top: 0;
            right: 0;
        }