在 Div 元素上显示 html 表格以使表格内容不重叠？

Question

HTML页面

<div *ngIf="visibleTournament">
  <div class = "row">
    <div *ngFor="let entry of competitionTeams | keys">
      <div class="col-md-4">
        <div>
          <div (click) = "entry.hideme = !entry.hideme" (mouseleave)= "entry.hideme = false">
            <div class = "groupBox"><div class="placed"><h3><span class = "label label-warning">Group - {{entry.key}}</span></h3></div></div>
          </div>
            <div class="well box" [hidden] = "!entry.hideme">
              <table class="table">
                  <thead class="thead-inverse">
                  <tr>
                    <th>#</th>
                    <th>Team</th>
                    <th>Played Games</th>
                    <th>Points</th>
                    <th>Goals</th>
                    <th>GA</th>
                    <th>GD</th>
                  </tr>
                  </thead>
                </table>

当我单击现有 div 顶部的相应 div 而不是 div 从其位置移动时，我想显示一个表格。还要增加表格宽度，以便于查看。

我的 CSS

.avatar{
  width:30px;
  height:30px;
  margin-right: 10px;
}

.inline{
  display: inline-block;
  margin: 10px 20px;
}

.check{
  min-width: 500px;
}

.selector{
  cursor: pointer;
}
.placed{
  margin: 0 auto;
}

.box{
  position: relative;
  text-align: center;
  background: #ccffda;
  padding: 10px 20px;
  width : 100%;
  height: 100%;
  border: darkgray 1px solid;
}


.groupBox{
  text-align: center;
  background: lightsteelblue;
  padding: 20px 20px;
  margin: 2px;
  border: darkgray 1px solid;
  cursor: pointer;
}


.fix{
  position: absolute;
}

如果现有元素，如何使表格显示在顶部，并增加表格的宽度超过 col 宽度。

我不是 CSS 专家，请帮忙

Answer 1

您可以使用absolute positioning 从流中删除元素。这样，它就不会下推后续的组框。这也将使元素呈现 in front of 其他元素，这也是您想要的。

当一个元素有position: absolute 时，它的坐标是相对于同样将position 设置为绝对或relative 的父元素解析的。因此，您可能希望在祖先上设置position: relative，以便您可以将top 和left 相对于组对齐，同时仍然允许组为自己腾出空间。