CSS Смещение элементов с position:absolute и position: sticky;

Question

Есть вот такой пример Timeline элементов

.timeline-wrapper {
  position: relative;
}

.timeline-line-animation {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  transform-origin: top;
  transform: scaleY(1);
  will-change: transform;
  z-index: 1;
  background-color: #f00;
}

.timeline-line-animation-green {
  background-color: #0f0;
}

.timeline img {
  border: 0;
  max-width: 100%;
}

.timeline {
  list-style: none;
  position: relative;
  padding: 0;
}

.timeline:before {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  width: 4px;
  left: 50%;
}

.timeline-panel {
  width: 50%;

  border: 1px solid #f6f6f8;
  padding: 15px;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.timeline-item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  justify-content: center;
}

.timeline-item:not(:first-child) {
  margin-top: 40px;
}

li.timeline-left {
  flex-direction: row-reverse;
}

.timeline-side strong {
  font-weight: 600;
}

.timeline-side p:not(:last-child) {
  margin-bottom: 10px;
}

.tl-desc-short strong {
  font-weight: bold;
}

.tl-circ {
  position: absolute;
  top: 0;
  left: calc(50% - 11px);
  align-self: self-start;
  transition: background 0.2s;
  min-width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #f00;
  z-index: 1;
}

.is-stuck .tl-circ {
  transition: background 0.2s;
}

.tl-trigger {
  position: absolute;
  top: 50vh;
  height: 1px;
  width: 100%;
  pointer-events: none;
}

.timeline-side {
  width: 50%;
  line-height: 1.3em;
  text-align: center;
}

.timeline-side p {
  margin-top: 0;
  margin-bottom: 0;
}

.timeline-side .min {
  font-size: 12px;
}

.tl-body p,
.tl-body ul {
  margin-bottom: 0;
}

.tl-body>p+p {
  margin-top: 5px;
}

.timeline .timeline_pic {
  position: relative;
  padding: 0;
}

.tl-title {
  margin: 0;
}

.tl-content p {
  margin-bottom: 5px;
}

@media (min-width: 701px) {
  /*.timeline-side {*/
  /*    position: sticky;*/
  /*    top: 0;*/
  /*}*/

  .timeline-inverted .timeline-panel {
    margin-left: 60px;
  }

  .timeline-left .timeline-panel {
    margin-right: 60px;
  }

  .timeline-animation-marker .tl-circ {
    position: sticky;
  }

  .elementor-widget-container .timeline-item:nth-child(2n) .tl-circ {
    left: calc(50% - 11px);
  }

  .timeline-animation-marker .timeline-panel {
    width: calc(50% + 2px);
    margin: 0;
  }
}

@media (max-width: 700px) {
  .timeline-item {
    flex-wrap: wrap;
    gap: 20px;
  }

  .tl-title,
  .timeline-side p {
    text-align: left;
  }

  .tl-circ {
    transform: none;
    left: 8px;
  }

  .timeline-line-animation {
    left: 20px;
  }

  .timeline:before {
    left: 20px;
    margin-left: 0;
  }

  .timeline-panel,
  .timeline-side {
    width: calc(100% - 60px);
    margin-left: 35px;
  }

  .timeline-item>.timeline-panel:before {
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    right: auto;
  }

  .timeline-item>.timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
  }
}

<div class="wp-block-za-timeline-full-widget timeline-wrapper " style="--timeline-color:#F6F6F8;--timeline-color-animation:#F37321">
  <div class="timeline-line-animation timeline-line-animation-green"></div>
  <ul class="timeline-animation-marker timeline">
    <li class="wp-block-za-timeline-item timeline-item timeline-left is-stuck">
      <div class="timeline-side">
        <p class="t-text-align-left">ываыва ываываыва</p>
      </div>
      <div class="tl-trigger"></div>
      <div class="tl-circ"></div>
      <div class="timeline-panel">
        <div class="tl-content">
          <div class="tl-desc">
            <h3 class="t-text-align-left tl-title">Timeline Item #1</h3>
            <div class="tl-desc-short">
              <p>ываыв аыва ыва ыва</p>
            </div>
          </div>
        </div>
      </div>
    </li>

    <li class="wp-block-za-timeline-item timeline-item timeline-inverted is-stuck">
      <div class="timeline-side">
        <p class="t-text-align-left">ываыва ыва ыва</p>
      </div>
      <div class="tl-trigger"></div>
      <div class="tl-circ"></div>
      <div class="timeline-panel">
        <div class="tl-content">
          <div class="tl-desc">
            <h3 class="t-text-align-left tl-title">Timeline Item #2</h3>
            <div class="tl-desc-short">
              <p>ыва ыва ыва ыва ываы ваыва</p>
            </div>
          </div>
        </div>
      </div>
    </li>

    <li class="wp-block-za-timeline-item timeline-item timeline-left is-stuck">
      <div class="timeline-side">
        <p class="t-text-align-left"></p>
      </div>
      <div class="tl-trigger"></div>
      <div class="tl-circ"></div>
      <div class="timeline-panel">
        <div class="tl-content">
          <div class="tl-desc">
            <h3 class="t-text-align-left tl-title"></h3>
            <div class="tl-desc-short"></div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

<div class="wp-block-za-timeline-full-widget timeline-wrapper" style="--timeline-color:#F6F6F8;--timeline-color-animation:#F37321">
  <div class="timeline-line-animation"></div>
  <ul class="timeline">
    <li class="wp-block-za-timeline-item timeline-item timeline-left is-stuck">
      <div class="timeline-side">
        <p class="t-text-align-left"></p>
      </div>
      <div class="tl-trigger"></div>
      <div class="tl-circ"></div>
      <div class="timeline-panel">
        <div class="tl-content">
          <div class="tl-desc">
            <h3 class="t-text-align-left tl-title">
              Timeline Item #1 bez Marker
            </h3>
            <div class="tl-desc-short"></div>
          </div>
        </div>
      </div>
    </li>

    <li class="wp-block-za-timeline-item timeline-item timeline-inverted is-stuck">
      <div class="timeline-side">
        <p class="t-text-align-left"></p>
      </div>
      <div class="tl-trigger"></div>
      <div class="tl-circ"></div>
      <div class="timeline-panel">
        <div class="tl-content">
          <div class="tl-desc">
            <h3 class="t-text-align-left tl-title">Timeline Item #2</h3>
            <div class="tl-desc-short"></div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

Оба компонента взяты из плагина и отличаються по сути наличием класса timeline-animation-marker который в первом случае меняет значения позиционирования .timeline-animation-marker .tl-circ {position: sticky;} для кругов а во втором - нет. Остаеться position:absolute.

Мой вопрос состоит в том, как правильно задать значения для элементов .tl-circ что б они всегда были по центру относительно линии ? * Я не понимаю, почему происходят эти смещения и как их фиксировать? При чем почему-то в зависимости от элементов обберток эти круги могут смещаться в совершенно разные стороны и я не понимаю почему так.

БЛОГ НА HUSL

CSS Смещение элементов с position:absolute и position: sticky;

Ответы (0 шт):