标签和内容元素组合在一起时，放置一行标签

Question

是否可以设置标签元素的样式，使其在不使用css绝对定位的情况下显示在页面顶部，同时还可以将标签及其相应的内容元素分组？

例如，我有一个通用的页面结构...

然后，我希望与选项卡相关的所有数据元素在HTML中分组在一起...

<div class="tabs">
  <div class="tab">
    <div class="tabname">tab1</div>
    <nav>
      <a href="tab1-item1-url">Item 1</a>
      <a href="tab1-item2-url">Item 2</a>
    </nav>
    <div class="content">
      <!-- tab content here -->
    </div>
  </div>
  <div class="tab">
    <div class="tabname">second<br>tab</div>
    <nav>
      <a href="tab2-item1-url">Item 1</a>
      <a href="tab2-item2-url">Item 2</a>
    </nav>
    <div class="content">
      <!-- tab content here -->
    </div>
  </div>
  <div class="tab">
    <div class="tabname">tab<br>name 3</div>
    <nav>
      <a href="tab3-item1-url">Item 1</a>
      <a href="tab3-item2-url">Item 2</a>
    </nav>
    <div class="content">
      <!-- tab content here -->
    </div>
  </div>
</div>

此结构对于将相关数据和导航元素保持在一起非常方便，并且可以让我非常轻松地添加或删除标签，但是我不确定如果没有绝对定位或JavaScript，是否可以实现。我错了吗？