div-固定在頁面中間，不被其他元素覆蓋

comeoncode發表於2024-08-09

最開始設定的子元素D 是text-align:center，子元素C的內容過長的時候，會發現子元素D不在頁面正中了

所以需要把子元素D設定成固定中間，把子元素D設定成固定中間後，發現元素B把子元素D給覆蓋了一部分，

所以需要在父元素A和元素B之間加一個空的div，給div設定高度後，父元素A和元素B之間的距離就是div的高度

父元素A：positon:relative;

子元素D：position:absolute;left:30%;right:30;

子元素C：float:left;

子元素E：float:right;

元素B

這個時候會發現下面的元素B會把這個父元素A覆蓋上

需要在兩者之間加一個空的div，然後設定一個高度，兩個元素就會隔開這個高度的距離

<div style="text-align: center;margin-bottom:10px;position:relative">
      <div style="float:left;font-weight: bold;">{{ selectDept }}</div>
      <div style="position:absolute;left:30%;right:30%;margin-bottom:10px;">
        <a @click="getThisWeekData(currentData.startData, -7)"><a-icon type="left"/></a>
        <span style="margin-left:10px;margin-right:10px;font-weight:bold;">{{ currentData.startData }} ~ {{ currentData.endData }}</span>
        <a @click="getThisWeekData(currentData.startData, 7)"><a-icon type="right"/></a>
      </div>
      <a-button type="primary" style="float:right;" size="small" @click="getThisWeekManHour">本週</a-button>
      <div style="height:20px;"></div>
    </div>

相關文章