How to align a child div to the top of its parent div which is scrollable-CodePudding

Using css, I want the the div(.scroll-indicator) to always cover parent div(.scroll-container), but when you scroll you see that it scrolls along with its content.

https://jsfiddle.net/vish6263/srnjyvtm/16/

Basically position: sticky is a hybrid of relative and fixed Is there a solution for a hybrid of absolute and fixed?

Update: I already have it working by wrapping it without another container but since this is a re-usable component I am developing I didn want to add another layer inbetween, so was wondering if there is a solution using CSS only?

.scroll-container {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: auto;
  border: 1px solid blue;
}

.scroll-item {
  height: 50px;
}

.scroll-indicator {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 1px solid red;
}

<div class='scroll-container'>
  <div class='scroll-indicator'>
  
  </div>
  <div class='scroll-item'>item1</div>
  <div class='scroll-item'>item2</div>
  <div class='scroll-item'>item3</div>
  <div class='scroll-item'>item4</div>
  <div class='scroll-item'>item5</div>
  <div class='scroll-item'>item6</div>
</div>

CodePudding user response：

Wrap the items in another div;

.scroll-container {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid blue;
  display: flex;
}

.scroll-item {
  height: 50px;
  font-size: 20px;
}

.scroll-indicator {
  position: absolute;
  width: 100px;
  height: calc(100% - 20px);
  top: 0;
  left: 0;
  border: 1px solid red;
  pointer-events: none;
}

.scroll-items {
  overflow-y: auto;
  display: flex;
}

<div class='scroll-container'>
  <div class='scroll-indicator'>

  </div>
  <div >
    <div class='scroll-item'>item1</div>
    <div class='scroll-item'>item2</div>
    <div class='scroll-item'>item3</div>
    <div class='scroll-item'>item4</div>
    <div class='scroll-item'>item5</div>
    <div class='scroll-item'>item6</div>
  </div>
</div>

Edit: fixed issue because I forgot to update it from my JsFiddle

CodePudding user response：

If you know the height you can try the following:

.scroll-container {
  --h: 200px; /* the height */
  
  position: relative;
  width: 200px;
  height: var(--h);
  overflow: auto;
  border: 1px solid blue;
}

.scroll-item {
  height: 50px;
}

.scroll-indicator {
  position: sticky;
  top: 0;
  height: inherit;
  margin-bottom: calc(-1*var(--h));
  border: 1px solid red;
  box-sizing: border-box;
  pointer-events: none
}

<div class='scroll-container'>
  <div class='scroll-indicator'>

  </div>
  <div class='scroll-item'>item1</div>
  <div class='scroll-item'>item2</div>
  <div class='scroll-item'>item3</div>
  <div class='scroll-item'>item4</div>
  <div class='scroll-item'>item5</div>
  <div class='scroll-item'>item6</div>
</div>