Question

这是我的HTML代码

<div class="row table-filter flex-container show"> //This has absolute position because i need to show this on top of a table its a filter which open on click of table header
  <div class="uniqueTable">
    <div class="row tablescroll"> // Here im displaying filter values which is not fix it can be 10 or more than 100
    </div>
    <div class="btn-wrapper"></div> //these are button which i want to display at fixed position suppose content increase so i want to make it fix to same position it should not scroll with content
  </div>
</div>

这是我的css

.table-filter{
  position: absolute;
  top: 23px;
  left: -68px;
  border: 1px solid #ccc;
  margin-right: 30px;
  z-index: 1;
  max-height: 25em;
  overflow-y: auto;
  overflow-x: hidden;
  width: 11em;
}

父div表过滤器具有绝对位置，如果内容很大，则滚动条存在，但我希望我的btn-wrapper在滚动条存在时保持相同位置

Answer 1

为按钮设置position: fixed可能是您需要的

Answer 2

.btn_wrapper { position: fixed; top: 100px;}

根据您的需要更改top的值。

Answer 3

这里的答案是正确的。 position:fixed;是最好的方式。我已经在codepen中对您的代码进行了快速更改：https://codepen.io/Robhern135/pen/YEwByR。

Answer 4

试试这个

＆＃13;

.table-filter {
  position: absolute;
  top: 23px;
  left: 68px;
  border: 1px solid #ccc;
  margin-right: 30px;
  z-index: 1;
  width: 11em;
}

.uniqueTable {
  max-height: 10em;
  overflow-y: auto;
  overflow-x: hidden;
}

＆＃13;

<div id="" class="row table-filter flex-container show">
  Header
  <div class="uniqueTable">
    <div class="row tablescroll">
      Filter<br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br> Filter
      <br>

    </div>
  </div>
  <div class="btn-wrapper"> <button>Save</button><button>Edit</button> </div>
</div>

＆＃13;

使用position:fixed将元素相对于屏幕定位。我想你正在寻找相对于父.table元素

来修复的元素

如果内容可滚动，则位置按钮始终位于相同位置

4 个答案: