position:absolute-top,right,bottom,left为0使用

绝对定位一直用起来非常方便，直接脱离文本流。偶然发现它还有个超强的功能。竟然可以撑开盒子宽高。

对外

默认情况下，看代码；盒子如果设置宽高后设置绝对定位,bottom为0会自动抵底部。

<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .wai{
                position:relative;
                top: 300px;
                left: 300px;
                width: 233px;
                height: 370px;
                background-color: yellow;
            }
            .nei{
                position: absolute;
                /*top: 0px;*/
                /*left: 0px;
                right: 0px;*/
                bottom: 0px;
                width: 100px;
                height: 100px;
                background-color: rgba(200,200,200,0.7);
            }
        </style>
</head>
<body>
     <div class="wai">
             <div class="nei">
                    <!--  <div class="nei-item1">1</div>
                     <div class="nei-item2">2</div> -->
             </div>
     </div>
</body>
</html>

当我们同时设置bottom和top，nei盒子会自动抵触顶部。说明top优先级要比bottom高。

当我们这个时候把nei盒子的高度去掉，这个时候神奇的事情发生了。nei的高度被撑开。

同理width不设置，然后设置left,right为零，nei的宽度也会被撑开.

为了确认宽高是来源于最邻近的定位点，而不是父级，我们在wai内在加个盒子wai2并设置宽高。

1.nei盒子的宽高完全由上级定位节点，而不是父级确定。
2.nei盒子完全覆盖掉wai2的位置。

<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
                          .wai{
                position:relative;
                top: 300px;
                left: 300px;
                width: 233px;
                height: 370px;
                background-color: yellow;
            }
                .wai2{
                width: 100px;
                height: 100px;
                background-color: yellow;
                }
                 .nei{
                position: absolute;
                top: 0px;
                left: 0px;
                right: 0px;
                bottom: 0px;
                background-color: red;
                <!--background-color: rgba(200,200,200,0.7);-->
            }
        </style>
</head>
<body>
     <div class="wai">
        <div class="wai2">
                 <div class="nei">
             </div>
        </div>
            
     </div>
</body>