工作中遇到的CSS那些点

1.position:absolute和height:100%

正常情况下

position:absolute; 参照物：最近的含有position的父级元素

height: 100%; 元素高度= 父级高度 X 100%

现在当两者同时作用在一个元素

<ul>
   <li>
       <div class="li_line"></div>
       <div class="li_node"></div>
       <div class="li_wrapper">
          <div> 表单名字 </div>
          <div>假设进度条</div>
       </div>
   </li>
   <li>
        <div class="li_line"></div>
        <div class="li_node"></div>
        <div class="li_wrapper">
           <div> 表单名字 </div>
           <div>假设进度条</div>
         </div>
    </li>
 </ul>

    ul{
      position: relative;
    }
    li {
      list-style: none;
      height: 70px;
      padding-bottom: 20px;
    }
    .li_line{
      position: absolute;
      left: 4px;
      height: 100%;
      border-left: 2px solid #e4e7ed;
    }
    
    .li_node {
      position: absolute;
      background-color: #e4e7ed;
      border-radius: 50%;
      left: -1px;
      width: 12px;
      height: 12px;
    }
    .li_wrapper{
      position: relative;
      padding-left: 28px;
      top: -3px;
    }

li的高度是50px; .li_node 线的高度明显比li高且高度为100px

造成这样的原因猜测：此时.li_node的position参照物（父级）是ul；height百分比此时的父级也从li变成了ul;

解决：

如图

后续遇到其他的继续写