徽标和导航标签重叠

Answer 1

问题在于 .logo 容器类中的位置固定。去掉就好了

body {
     font-family: Arial, sans-serif; margin: 20px; 
    }
    
.container{
    display: flex;
    flex-direction: column;
}

table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 20px;
}

th,
td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

.logo-container {
    /* position: fixed; */
    top: 0;
    left: 0;
    margin: 10px;
    z-index: 1000
}

img.logo {
    background-color: transparent;
    padding: 0;
    margin: 0;
    border: none;
    }

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="logo-container">
  <img src="https://picsum.photos/200/300" alt="logo_me" height="100" width="200" class="logo">
</div>
<div class="container mt-4 custom-tabs-container mx-auto my-4 clearfix">        
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item" role="presentation">
      <a class="nav-link active" id="TAB1-tab" data-bs-toggle="tab" href="#TAB1" role="tab" aria-selected="true">Info</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" id="TAB2-tab" data-bs-toggle="tab" href="#TAB2" role="tab" aria-selected="false" tabindex="-1">Tabla de precios</a>
    </li>
  </ul>
</div>