Редактируемая ячейка не перекрывает соседние ячейки в таблице начальной загрузки

Question

Я использую bootstrap 3 и имею таблицу bootstrap-table с редактируемыми ячейками и изменяемыми по размеру столбцами. Для изменения размера я использую расширение bootstrap-table-resizable и для редактирования ячеек bootstrap-table-editable, в котором используется x-editable.

Редактируемая ячейка (textarea с кнопками) не перекрывает соседние ячейки. Я попытался установить z-index для редактируемого компонента, но это не помогло.

jsfiddle

HTML

<table class="table table-striped table-bordered table-hover" cellspacing="0" id="mainTable" data-click-to-select="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-pagination="true"> 
    <thead> 
    <tr> 
     <th data-field="name" >Name</th> 
     <th data-field="stargazers_count">Stars</th> 
     <th data-field="forks_count" >Forks</th> 
     <th data-field="description" >Description</th> 
    </tr> 
    </thead> 
</table> 

Javascript

$.fn.editable.defaults.mode = 'inline'; 

var data = [{name: 'ala', stargazers_count: 234, forks_count: 234, description: "asdasdas"}, 
      {name: 'ala', stargazers_count: 234, forks_count: 234, description: "asdasdas"}, 
      {name: 'ala', stargazers_count: 234, forks_count: 234, description: "asdasdas"}] 

$('table').bootstrapTable({ 
    data: data, 
    resizable: true 
}); 

$('tr td').editable({ 
    type: 'textarea', 
    showbuttons: true 
}); 

Answer 1

Я забыл добавить position: relative. Теперь это работает.

.editable-input, 
.editable-buttons button{ 
    position: relative; 
}