CSS - 放置元素导致滚动条具有相对和绝对。为什么？

Question

我正在创建一个带有表格和带有一些选项的标题的页面，我正在尝试将元素放在适当的位置。我想做的一件事是创建一个菜单来显示和隐藏列。在定位过程中，我遇到了以下结果：

这是我的HTML标记和CSS：

.conte-tabela {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.conte-tabela #cabecalho {
  background: #474241;
  border-left: 1px solid #312e2d;
  border-right: 1px solid #312e2d;
  border-top: 1px solid #312e2d;
  overflow: auto;
  width: 100%;
  position: relative;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome and Opera */
}

.conte-tabela #cabecalho #titulo {
  text-transform: uppercase;
  font-size: 10pt;
  font-weight: bold;
  color: white;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 38px;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.conte-tabela #cabecalho #opcoes {
  float: right;
  margin-right: 38px;
  display: inline-block;
}

.conte-tabela #cabecalho #opcoes button {
  background-color: #474241;
  border: 1px solid #312e2d;
  box-sizing: border-box;
  color: white;
  width: 40px;
  height: 40px;
  margin-top: 14px;
  margin-bottom: 14px;
  margin-left: 10px;
  width: 40px;
  background-repeat: no-repeat;
  background-position: center center;
}

.conte-tabela #cabecalho #opcoes #bot-pesquisa {
  background-image: url("/app/imagens/ico-pesquisa.png");
}

.conte-tabela #cabecalho #opcoes #bot-colunas {
  background-image: url("/app/imagens/ico-conf.png");
}

.conte-tabela #cabecalho #opcoes button:ACTIVE {
  background-color: #312e2d;
}

.conte-tabela #cabecalho #menu-colunas {
  position: absolute;
  display: inline-block;
  margin: 0;
  padding: 0;
  top: 50%;
  border: 1px solid black;
  z-index: 100;
}

<div class="conte-tabela" th:fragment="tabela-teste (titulo)">

  <!-- HEADER -->
  <div id="cabecalho">

    <!-- TITLE -->
    <span id="titulo" th:text="${titulo}">Título de tabela</span>

    <!-- BUTTONS (OPTIONS) -->
    <span id="opcoes">
    		<button id="bot-pesquisa"></button><button id="bot-colunas"></button>
    	</span>

    <!-- COLUMNS MENU -->
    <ul id="menu-colunas">
      <li>
        <input type="checkbox" th:value="1">
        <label>1</label>
      </li>
      <li>
        <input type="checkbox" th:value="2">
        <label>2</label>
      </li>
      <li>
        <input type="checkbox" th:value="3">
        <label>3</label>
      </li>
    </ul>
  </div>
  ...
</div>

注意：有些标签是特殊标签。我是Java开发人员，我正在使用Thymeleaf。

我该如何解决这个问题？如何摆脱滚动条以及如何显示列菜单中缺少的部分？

我知道我的CSS代码是错误的，我只是不知道在哪里。作为HTML标记不是我的强项......

是的，有人可以帮助我吗？提前谢谢。

编辑1

以下是所需结果的概要/草图：

编辑2

我不知道这是否可行，但标题应保持以下布局格式（相对于边/边框之间的空格）：

Answer 1

给#cabecalho一个高度值并添加overflow：visible。 通过添加权限来定位#menu-colunas：0。

<强>更新 从#cabecalho中取出＃menu-colunas并使用div包装它们。然后添加position：相对于该包装器。

请参阅更新后的代码here.

.wrapper {
  position: relative;  
}