绝对定位的元素落在其父容器的外部

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>