时间戳

首页 > 解决方案 > CSS 伪元素位于其后的其他内联元素之上

html - CSS 伪元素位于其后的其他内联元素之上

问题描述

我正在尝试在左侧创建一个可滚动的项目列表，并使用 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>

标签： htmlcss

解决方案

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

这可以通过将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

推荐阅读