Question

我试图在左侧创建一个可滚动的项目列表，并使用CSS生成一个箭头，该箭头从列表中弹出，位于滚动条上方，位于内容的顶部。问题在于，由于列表是可滚动的，因此它必须相对于该可滚动的列表，并且我不能使用绝对定位来将伪元素放在其他所有元素的顶部。

有人有什么想法吗？

这是我的JSFiddle： https://jsfiddle.net/184syueh/3/

这是我的HTML / CSS：

#left-scrollbar {
  width: 30%;
  float: left;
  display: inline-block;
  height: 500px;
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;
}

#left-scrollbar .item {
  height: 200px;
  border-top: 1px solid #000;
}

.item.selected {
  background-color: #00cc00;
}

.selected::after {
  left: 97%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-left-color: #88b7d5;
  border-width: 30px;
  margin-top: -30px;
}

#right-content {
  background-color: #ff0000;
  width: 70%;
  float: right;
  display: inline-block;
  position: relative;
  height: 100vh;
}

<div id="main-container">
  <div id="left-scrollbar">
    <div class="item">
      abcd
    </div>
    <div class="item selected">
      abcd
    </div>
    <div class="item">
      abcd
    </div>
  </div>
  <div id="right-content">
    a
  </div>
</div>

Answer 1

问题在于，由于列表是可滚动的，因此它必须相对于该可滚动的列表。

这可以通过将position以外的任何内容static（默认值）应用于您要绝对定位的父元素来解决。

进一步的解释：
https://css-tricks.com/absolute-positioning-inside-relative-positioning/ https://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute

在您的情况下，将position: relative应用于.item.selected效果很好，并且是解决此问题的常用方法。

更新的小提琴：
https://jsfiddle.net/d35x1bp4

之后的其他内联元素上方的CSS伪元素

1 个答案: