Как сделать указатели в таймлайне?

Question

[Tramplin333]

как можно еще сделать указатель в таймлайне я пытался через z-index но он почему то не работает

<div class="container">
   <div class="map" id="map">
         <div class="tittle">
            <h5 class="map_tittle ">Дорожная карта</h5>
            <h2 class="map_tittle-text w7">Ближайшие цели по развитию</h2>
         </div>
         <section>
         <div class="timeline">
            <ul>
            <li>
             
                <div class="timeline_content timeline_content2 timeline_content3 uk uk-2">
                   <section>
                        <h5>Разработка стратегии и концепции продукта </h5>
                        <h5 class="map_li">Разработка архитектуры сервиса </h5>
                        <h5 class="map_li"> Анализ рынка и конкурентной среды</h5>
                        <h5 class="map_li">Формирование команды </h5>
                        <h5 class="map_li">Создание бизнес проекта</h5>
                     </section>
              </div>
            
              <div class="timeline_data">
              <h2 class="timeline1">
              2020
              </h2>
              </div>
            </li>
            <li>
            <div class="timeline_content timeline_content4 uk uk-1">
               <section>
                        <h5 class="map_li">Разработка стратегии и концепции продукта </h5>
                        <h5 class="map_li">Разработка архитектуры сервиса </h5>
                        <h5 class="map_li"> Анализ рынка и конкурентной среды</h5>
                        <h5 class="map_li">Формирование команды </h5>
                        <h5 class="map_li">Создание бизнес проекта </h5>
               </section>
              </div>
              <div class="timeline_data">
              <h2 class="timeline1">
              2021
              </h2>
              </div>
            </li>
            <li>
               
              <div class="timeline_content timeline_content3 uk uk-2">
                 <section>
                        <h5 class="map_li">Разработка стратегии и концепции продукта </h5>
                        <h5 class="map_li">Разработка архитектуры сервиса </h5>
                        <h5 class="map_li"> Анализ рынка и конкурентной среды</h5>
                        <h5 class="map_li">Формирование команды </h5>
                        <h5 class="map_li">Создание бизнес проекта </h5>
                  </section> 
              </div>
              <div class="timeline_data">
                 <div class="error">
                 <img src="img/error.png" alt="">
              </div>
              <h2 class="timeline2">
              2022
              </h2>
              </div>
            </li>
            <div style="clear: both;"></div>
            </ul>
            </div>
         </section>
      </div>
</div>

.timeline{
   margin-top: 100px;
   position: relative;
   padding: 40px auto;
 }
 .timeline::before{
    content: '';
    position: absolute;
    left: 50%;
    width: 7px;
    height: 33rem;
    background: #FF6782;
    opacity: 0.2;
 }
 .timeline .timeline_content2::after{
   content: '';
   position: absolute;
   top: 0;
   left: -88px;
   width: 3px;
   height: 15rem;
   background: #02A4FC;
  
}

 .timeline ul{
    margin: 0;
    padding:0;
 }
 .timeline ul li{
   line-height: normal;
   position: relative;
   width: 50%;
   padding: 40px 50px;
   
}
.timeline1 {
   color: rgba(2, 164, 252, 1);
}
.timeline2 {
   color: rgba(255, 103, 130, 1);
}
.timeline_content{
   background: linear-gradient(90deg, rgba(126, 229, 255, 0.1) 3.12%, rgba(65, 169, 255, 0.1) 100%);
   width: 440px;
   border-radius: 8px;
   box-shadow: inset 0px 0.5px 2px rgba(255, 255, 255, 0.4);
   backdrop-filter: blur(3px);
   padding: 10px 32px;
   z-index: 1;
}

 section .uk::before{
position: absolute;
content: "";
height: 15px;
width: 15px;
background: linear-gradient(104.25deg, rgba(130, 232, 255, 0.2) 0%, rgba(55, 159, 255, 0.2) 100%), rgba(241, 241, 241, 0.1);
top: 28px;
z-index:-1;
transform: rotate(45deg);
}
section .uk-1::before{
right: -7px;
}
section .uk-2::before{
left: -7px;
}
.timeline_content3{
   margin-top: -10px;
   margin-left: 40px; 
}

.timeline_content4{
   margin-top: -40px;
   margin-left: -40px;
}
.timeline ul li:nth-child(odd){
   float: right;
   text-align: left;
   clear: both;
}
.timeline ul li:nth-child(even){
   float: left;
   text-align: left;
   clear: both;
}
.timeline ul li:nth-child(odd):before{
content: '';
position: absolute;
top: 24px;
left: -9px;
width: 24px;
height: 24px;
background: #02A4FC;
border-radius: 50%;
}
.error{
   position: absolute;
   left: 133px;
 
}
.timeline ul li:nth-child(even):before{
   content: '';
   position: absolute;
   top: 24px;
   right: -15px;
   width: 24px;
   height: 24px;
   background: #02A4FC;
   border-radius: 50%;
   }
   .timeline ul li:nth-child(odd) .timeline_data{
      position: absolute;
      top: 10px;
      left: -170px;
   }
   .timeline ul li:nth-child(even) .timeline_data{
      position: absolute;
      top: 10px;
      right: -165px;
   }

Comments

[Ankhena]

Интересно, зачем вам помогать, если вы не читаете, что написано?

Я вам в прошлый раз сказала, что нужно делать песочницу на сервисах типа jsfiddle.net
В этот раз повторю. Но больше помогать без неё не буду.

В вашем коде полно ошибок, неверная вложенность тегов. Проверяйте валидатором что пишете.

z-index не работает, потому что у вас еще backdrop-filter, а он создает новый контекст наложения.
Читайте css.yoksel.ru/kontekst-nalozheniya

[Ankhena]

Быстрый вариант: не делаете цвета полупрозрачными. Тыкните пипеткой в макет и получите цвета без прозрачности.
И тогда по аналогии: https://jsfiddle.net/Ankhena/5qdkah6o/