CSS Pseudo Element on top of other inline elements after it

问题: I am trying to create a scrollable list of items on the left, and use CSS to generate an arrow that pops out of the list, over the scroll bar, and on top of the content on...

问题:

I am trying to create a scrollable list of items on the left, and use CSS to generate an arrow that pops out of the list, over the scroll bar, and on top of the content on the right. The issue is that since the list is scrollable it has to be relative to that scrollable list, and I can't use absolute positioning to get the pseudo element on the top of everything else.

Anyone have any ideas?

Here is my JSFiddle: https://jsfiddle.net/184syueh/3/

And here is my 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>


回答1:

The issue is that since the list is scrollable it has to be relative to that scrollable list.

This is solved by applying a position of anything but static (the default value) to the parent element which you wish to absolutely position relative to.

Further explaination:
https://css-tricks.com/absolute-positioning-inside-relative-positioning/ https://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute

In your case, applying position: relative to .item.selected works just great and is a common solution to this problem.

Updated Fiddle:
https://jsfiddle.net/d35x1bp4

  • 发表于 2019-03-17 06:55
  • 阅读 ( 117 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除