CODEWITHSUNDEEP
htmlcss
DCo
DCo

Reputation: 69

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 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>

Upvotes: 1

Views: 499

Answers (1)

brad
brad

Reputation: 1445

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

Upvotes: 0

Related Questions