Показать таблицу html над элементами Div, чтобы содержимое таблицы не перекрывалось?

Question

Html Page

<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; 
} 

Как сделать таблицу появляются на вершине, если существующие elemnts, а также увеличить ширину таблицы по ширине COL.

Я не то, что эксперт по CSS, пожалуйста, помогите

Answer 1

Вы можете использовать absolute positioning удалить элемент из потока. Таким образом, он не будет толкать последующие групповые ящики. Это также сделает элемент render in front of другими элементами, которые вы также хотите.

Когда элемент имеет position: absolute, его координата разрешена относительно родителя, который также имеет position, установленный в абсолютный или relative. Таким образом, вы можете установить position: relative на предка, чтобы вы могли выровнять top и left относительно группы, в то же время позволяя группе освободить место для себя.