overflow裁剪绝对定位（position: absolute）的后代元素的问题

原创已于 2022-05-15 12:08:29 修改 · 3.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#overflow #绝对定位 #absolute #后代元素被裁剪

于 2018-08-02 09:29:12 首次发布

本文介绍了一种实现带有badge的导航栏布局方案，在左侧菜单栏中使用Vue.js进行滚动条设置时遇到badge被裁剪的问题，并提供了解决思路。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

lizuncong (lizuncong) · GitHubI am a strong believer in reverse engineering. lizuncong has 43 repositories available. Follow their code on GitHub.https://github.com/lizuncong

先上图：

如图所示，我想实现上边导航栏，左边菜单栏，右边内容区的布局，每个菜单项有个badge。左边的导航栏设置overflow-y: scroll，overflow-x: hidden。可见badge被部分裁剪了。请问各位大佬有什么好的办法解决这个问题吗。代码如下：

<template>
  <div id="indexApp">
    <div class="header">导航栏</div>
    <div class="content">
      <div class="side-menu">
        <div class="menu-item" v-for="i in 12" :key="i">
          <span class="badge">12</span>
          菜单{{ i }}
        </div>
      </div>
      <div class="side-main">
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
  .header {
    padding: .18rem;
    text-align: center;
    background-color: #484759;
    color: #FFFFFF;
  }
  .content {
    display: flex;
    flex: 1;
    flex-direction: row;
    .side-menu {
      width: .50rem;
      flex-shrink: 0;
      overflow-y: scroll;
      overflow-x: hidden;
      background-color: #f2f5f7;
      .menu-item {
        position: relative;
        padding: .14rem;
        text-align: center;
        font-size: 16px;
        color: #333333;
        .badge {
          position: absolute;
          right: -.10rem;
          top: .10rem;
          display: flex;
          justify-content: center;
          align-items: center;
          width: .24rem;
          height: .24rem;
          border-radius: 50%;
          background-color: #FC4B4C;
          font-size: 10px;
          color: #FFFFFF;
        }
      }
    }
    .side-main {
      flex:1;
      overflow: scroll;
      padding: 0 .15rem;
    }
  }
</style>
<script>
  export default{
    data(){
      return {
      }
    },
  }
</script>