Question

我希望有一个水平的项目列表，包含在具有固定宽度的可水平滚动的外包装中。外包装具有相对位置。其中一个项目包含一个绝对定位的div。

滚动外包装时，我希望绿色覆盖层保持在同一位置。我认为位置：绝对总是相对于具有定义位置的第一个祖先（这将是外包装）？

我正在使用white-space：nowrap for #wrapper连续获取项目。

#outer-wrapper {
  position: relative;
  width: 300px;
  height: 150px;
  overflow: scroll;
}

#wrapper {
  white-space: nowrap;
  display: inline-block;
}

#one {
  background-color: red;
}

#two {
  background-color: blue;
}

.box {
  white-space: normal;
  display: inline-block;
  width: 200px;
  height: 150px;
}

.overlay {
  background-color: green;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 40px;
}

<div id="outer-wrapper">
  <div id="wrapper">
    <div id="one" class="box">
      <div class="overlay"></div>
    </div>
    <div id="two" class="box"></div>
  </div>
</div>

我希望标记保持原样，尽管这并不是完全修复的。

我无法为水平列表定义固定宽度。

Answer 1

如果我的问题正确，那么仅使用HTML和CSS是不可能的。但是你可以用jQuery实现它，如下所示：

$(function() {
  var wrapper = $('#outer-wrapper');
  
  $('#outer-wrapper').scroll(function() {
    $('.overlay').css({
      'marginLeft': wrapper.scrollLeft()
    });
  });
});

#outer-wrapper {
  position: relative;
  width: 300px;
  height: 150px;
  overflow: scroll;
}

#wrapper {
  white-space: nowrap;
  display: inline-block;
}

#one {
  background-color: red;
}

#two {
  background-color: blue;
}

.box {
  white-space: normal;
  display: inline-block;
  width: 200px;
  height: 150px;
}

.overlay {
  background-color: green;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="outer-wrapper">
  <div id="wrapper">
    <div id="one" class="box">
      <div class="overlay"></div>
    </div>
    <div id="two" class="box"></div>
  </div>
</div>

white-space：nowrap似乎影响内部元素的位置：绝对

1 个答案: