как исправить положение прокрутки внутреннего div в зависимости от высоты родительского div

Question

мой дизайн был в 2 столбцах: первый столбец: ширина 50px, для второго столбца меню: оставшаяся ширина px

Во втором столбце На основе высоты родительского элемента: 15611px (это может варьироваться в зависимости от содержимогодлина) внутренняя позиция div верхняя позиция должна измениться отрицательно

Второй столбец:

<div class="column-wrapper" style="height:15611px;">
     <div class="homepage-column-left"  style="top:-5px"> 

          ----content------ images

     </div>
     <div class="homepage-column-right"  style="top:-5px"> 

          ----content------ images

     </div>
</div>

Я ожидаю, что значение верхней позиции должно измениться на отрицательное при прокрутке

Answer 1

Чтобы позиционировать дочерний элемент «фиксированный» относительно родительского элемента, вы можете использовать position: absolute для дочернего элемента и любой режим позиции, отличный от стандартного или статического для вашего родительского элемента.

Дляпример:

<div class="column-wrapper" style="height: 15611px; position: relative;">
    <div class="homepage-column -left"  style="top:-5px; position: absolute;"> 
        ----content------ images
    </div>
    <div class="homepage-column -right"  style="top:-5px; position: absolute;"> 
        ----content------ images
    </div>
</div>

Answer 2

top: -5px; ничего не сделает, если элемент не имеет position: absolute;, а родительский элемент не имеет position: relative;

Я бы порекомендовал css вместо inline, но вот что вам нужно, используя inlineстайлинг ...

<div class="column-wrapper" style="height: 15611px; position: relative;">
                  <div class="homepage-column -left"  style="top:-5px; position: absolute;"> 


                          ----content------ images

                   </div>
                   <div class="homepage-column -right"  style="top:-5px; position: absolute;"> 


                          ----content------ images

                   </div>
</div>