絕對定位的元素落在其父容器的外部

Question

我正在開發一個項目，我需要將上一個和下一個導航元素浮動到博客歸檔頁面標題的任一側（此示例爲綠色圓圈）。坐在綠色的圓圈內將是一個帶有SVG背景元素的跨度 - 因此圓圈需要被定位。

我想保持語義的東西，所以我已經奠定了我的網頁（節）頭如下：

<header class="archive-box">  

    <nav class="archive-nav"> 

     <div class="left-nav"> 
     <a class="icon-bg" href="#" title=""> 
     </a> 
     </div> 

     <div class="right-nav"> 
     <a class="icon-bg" href="#" title=""> 
     </a> 
     </div> 

    </nav> 

    <h2>Stuff and Things</h2> 

</header> 

CSS

.archive-box { 
    max-width: 900px; 
    height: 75px; 
    margin: 50px auto; 
    border: 1px solid; 
    position: relative; 
} 
.archive-nav { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
} 
.left-nav { 
    position: absolute; 
    left: 0; 
} 
.right-nav { 
    position: absolute; 
    right: 0; 
} 

.icon-bg { 
    background-color: #9ccb3b; 
    border-radius: 50%; 
    height: 75px; 
    width: 75px; 
    position: absolute; 
} 

h2 { 
    text-align: center; 
} 

右導航元素會之外其父母的容器。我認爲這可能與我擁有多個親子絕對元素的事實有關。有沒有另一種方法來做到這一點？

Here's the CodePen

Answer 1

有時候，你需要有編碼的CSS位置的特定的順序。我的意思是，如果你粘貼整個代碼並運行它，如果你一步一步地寫入並保存它，它將會不同。當我學習css時，它幫助了我幾次。
也試着把margin:auto置於.right-nav和.left-nav

Answer 2

這是你想要它的方式嗎？ CodePen。我沒有使用position: absolute，而是使用float: left和float: right，這樣left和right菜單項分別位於左側和右側，標題位於中間。

section { 
 
    position: relative; 
 
    background-color: blue; 
 
    color: white; 
 
    width: 80%; 
 
    margin: auto; 
 
} 
 
article { 
 
    background-color: green; 
 
    height: 50px; 
 
} 
 
h1 { 
 
    color: white; 
 
    font-size: 30px; 
 
} 
 
nav { 
 
    top: 0; 
 
    font-size: 20px; 
 
} 
 
.left { 
 
    left: 0; 
 
    /* position: absolute; */ 
 
    color: yellow; 
 
} 
 
.right { 
 
    right: 0; 
 
    /* position: absolute; */ 
 
    color: pink; 
 
} 
 
h1 { 
 
    text-align: center; 
 
} 
 
.bg { 
 
    float: left 
 
} 
 
.bgtwo { 
 
    float: right; 
 
}

<section> 
 
    <nav> 
 
    <div class="bg"> 
 
     <div class="left">LEFT</div> 
 
    </div> 
 
    <div class="bgtwo"> 
 
     <div class="right">RIGHT</div> 
 
    </div> 
 
    </nav> 
 
    <h1>Hello There</h1> 
 
    <article> 
 
    <p>Here is some stuff about things.</p> 
 
    </article> 
 
</section>