Pseudo-élément CSS au-dessus d'autres éléments en ligne après lui

Question

J'essaie de créer une liste d'éléments défilables sur la gauche et d'utiliser une feuille de style en cascade pour générer une flèche qui sort de la liste, passe par-dessus la barre de défilement et se trouve au-dessus du contenu sur la droite. Le problème est que, puisque la liste est déroulante, la flèche doit être relative à cette liste déroulante et je ne peux pas utiliser le positionnement absolu pour placer le pseudo-élément au-dessus de tout le reste.

Quelqu'un a une idée ?

Voici mon JSFiddle : https://jsfiddle.net/184syueh/3/

Et voici mon 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

Le problème est qu'étant donné que la liste est déroulante, il doit être relatif à cette liste déroulante.

Ce problème est résolu en appliquant un position de tout sauf static (la valeur par défaut) à l'élément parent par rapport auquel vous souhaitez avoir une position absolue.

Explication supplémentaire :
https://css-tricks.com/absolute-positioning-inside-relative-positioning/ https://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute

Dans votre cas, l'application position: relative a .item.selected fonctionne parfaitement et constitue une solution courante à ce problème.

Mise à jour du violon :
https://jsfiddle.net/d35x1bp4