Для изменения порядка элементов так, чтобы абсолютный элемент оказался под другим элементом, можно использовать свойство CSS - z-index.
Например, если у вас есть два элемента с классами "element1" и "element2", и вы хотите, чтобы "element2" находился под "element1", можно задать для "element1" больший z-index.
```
.element1 {
position: absolute;
z-index: 2;
}
.element2 {
position: relative;
z-index: 1;
}
```
Чтобы разместить линию под кружками, вы можете добавить эту линию внутрь контейнера, содержащего кружки, и применить те же значения z-index, что и для кружков и линии.
Примерный HTML-код:
```html
<div class="container">
<div class="circle"></div>
<div class="circle"></div>
<div class="line"></div>
</div>
```
Примерный CSS-код:
```css
.container {
position: relative;
}
.circle {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
position: relative;
z-index: 2;
}
.line {
width: 100%;
height: 2px;
background-color: black;
position: absolute;
bottom: 0;
z-index: 1;
}
```
При такой структуре и стилях, линия будет размещена под кружками, так как ее z-index меньше, чем у кружков.
