Как сделать чтобы одна секция шла после другой, и не накрывала её?

Question

[Emil7676]

У меня произошла такая проблема: section class="global-block main-vibor", накрывает все остальные секции, а нужно чтобы он шёл после секции whot. Подскажите пожалуйста как это сделать.

<section class="whots">
       
       <div class="whot">
           
        <p class="whotjob">Как работает платформа Cool Заработок?</p> 
         <p class="whotjobs">Cool Заработок - это международная система взаимного финансирования, в которой люди<br> объединились в сообщество и добровольно финансируют друг друга с целью повысить свое<br> благосостояние. Система работает по принципу улучшенной кассы взаимопомощи. Применяемая<br> технология кассы взаимопомощи значительно усовершенствована, благодаря чему она обеспечивает <br> высокую доходность, надежность и безопасность.</p>
          
           
           <img src="assets/imeges/job.png" class="job1">
             
       </div>
        </section>

.whots {
    position: absolute;
width: 1920px;
height: 742.16px;
left: 0px;
top: 970px;

background: rgba(114, 94, 254, 0.05);
backdrop-filter: blur(10px);
}




.job1 {
    position: absolute;
    left: 1100px;
    bottom: 20px;
}





.whotjob {
    bottom: 500px;
    position: absolute;
    font-size: 40px;
    line-height: 44px;
    left: 100px;
    font-family: 'inherit', sans-serif;
}





.whotjobs {
    position: absolute;
    left: 100px;
    font-size: 18px;
    line-height: 35px;
    font-weight: 500;
    margin-bottom: 30px;
    bottom: 300px;
    font-family: 'Roboto', sans-serif;
}







.teext {
    position: absolute;
    left: 600px;
    top: 1800px;
    font-family: 'inherit', sans-serif;
    font-size: 40px;
    line-height: 44px;
}



.krug1 {
    position: absolute;
    top: 1950px;
    left: 1000px;
  width: 54px;
  height: 54px;
  line-height: 54px;
  background: linear-gradient(180deg, #FDB671 0%, #FF58C8 100%);
  margin: 1em;
  border-radius: 50%;
  text-align: center;
    color: #FFFFFF;
}


.krug2 {
    position: absolute;
    top: 2000px;
    left: 1000px;
  width: 54px;
  height: 54px;
  line-height: 54px;
  background: linear-gradient(180deg, #467FFC 0%, rgba(70, 127, 252, 0.5) 100%);
  margin: 1em;
  border-radius: 50%;
  text-align: center;
}

.krug3 {
    position: absolute;
    top: 2000px;
    left: 1000px;
  width: 45px;
  height: 45px;
  line-height: 45px;
  background: background: linear-gradient(21deg, #dd03e4, #5611ec);;
  margin: 1em;
  border-radius: 50%;
  text-align: center;
}

.krug4 {
    position: absolute;
    top: 2000px;
    left: 1000px;
  width: 45px;
  height: 45px;
  line-height: 45px;
  background: lightblue;
  margin: 1em;
  border-radius: 50%;
  text-align: center;
}

.krug5 {
    position: absolute;
    top: 2000px;
    left: 1000px;
  width: 45px;
  height: 45px;
  line-height: 45px;
  background: lightblue;
  margin: 1em;
  border-radius: 50%;
  text-align: center;
}


.krug6 {
    position: absolute;
    top: 2000px;
    left: 1000px;
  width: 54px;
  height: 54px;
  line-height: 54px;
  background: lightblue;
  margin: 1em;
  border-radius: 50%;
  text-align: center;
}


.tx1 {
    font-size:20px;
    position: absolute;
    top: 1940px;
    left: 1080px;
    font-family: 'inherit', sans-serif
}


.tx11 {
    position: absolute;
    top: 2000px;
    left: 1000px;
    font-family: 'Roboto', sans-serif;
    line-height: 24px;
}

<section class="global-block main-vibor">
<div class="container">
<h3 style="text-align: center;">Почему выбирают Cool Заработок?</h3>
<div class="vibor-wr">
<div class="main-krug left">
<img class="img" src="assets/imeges/card 5.png" alt="Картинка">
</div>
<div class="main-krug-txt right">
<div style="margin-left: -180px;">
<strong>Привлекательность</strong>. Доступно любому человеку и вне зависимости от уровня достатка и размера вкладов приносит ему дополнительный доход
</div>
<div style="margin-left: -50px;">
<strong>Доступность</strong>. Можно начать участие
с любой суммы
</div>
<div style="margin-left: -25px;">
<strong>Надёжность</strong>.Благодаря алгоритму графика
выплат и его адаптации, Сообщество
рассчитано на десятилетия
</div>
<div style="margin-left: -25px;">
<strong>Социальность</strong>. Объединяет людей разных стран,
наций и народов, общей идеей достатка
и материального благополучия.
</div>
<div style="margin-left: -45px;">
<strong>Децентрализованость</strong>. Средства не аккумулируются
в одном месте, а сразу распределяются на выплаты
каждую неделю.
</div>

<div style="margin-left: -110px;">
<strong>Идеология</strong>. Этот круг золотого цвета, потому что мы
провозгласили честность новым золотом и заявили,
что наше слово стоит дороже, чем металл.
</div>
</div>
</div>
</div>
</section>

@media (max-width:1000px){
.main-krug-txt{float:right!important;width:90%!important;}
.main-krug-txt div{margin:0 0 25px!important;}
.main-krug{width:100%!important;float:none!important;text-align:center!important;margin-bottom:20px!important;}
.main-krug img{display:inline-block;!importantmax-width:100%!important;height:auto!important;}
.container{padding-bottom:0!important;}
}
.main-krug{width:50%;height:auto;position:relative;overflow:hidden;margin-top:30px;}
.main-krug img{max-width:100%;height:auto; margin-top: 70px; margin-left: 70px;}
.main-krug-txt{width:40%;height:auto;position:relative;}
.main-krug-txt div{width:100%;height:auto;position:relative;font-size:18px;padding-bottom:8px;margin-bottom:22px;border-bottom:1px dashed #1DC9FF;}
.main-krug-txt div:nth-of-type(1):before{content:'1';text-align:center;line-height:45px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.3);}
.main-krug-txt div:nth-of-type(2):before{content:'2';text-align:center;line-height:45px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.3);}
.main-krug-txt div:nth-of-type(3):before{content:'3';text-align:center;line-height:45px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.3);}
.main-krug-txt div:nth-of-type(4):before{content:'4';text-align:center;line-height:45px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.3);}
.main-krug-txt div:nth-of-type(5):before{content:'5';text-align:center;line-height:45px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.3);}
.main-krug-txt div:nth-of-type(6):before{content:'6';text-align:center;line-height:45px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.3);}
.main-krug-txt div:before{content:'';display:block;width:45px;height:45px;border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;-o-border-radius:100%;background: linear-gradient(90deg, #74EEFF 12.5%, #00B2FF 100%); 100%);;position:absolute;left:-50px;}
.vibor-wr{width:100%;height:auto;position:relative;margin-top:50px;}
.main-vibor{line-height:24px;padding-bottom:35px;}
.left{float:left;}
.right{float:right;}
::selection{background:#1DC9FF;color:#fff;}
::-moz-selection{background:#1DC9FF;color:#fff;}
::-webkit-selection{background:#1DC9FF;color:#fff;}
::-ms-selection{background:#1DC9FF;color:#fff;}
::-o-selection{background:#1DC9FF;color:#fff;}
::-moz-selection,::selection{background-color:#000;color:#fff;}
section{display:block;}
strong{font-weight:700;}
img{border:0;}
@media print{
*,:after,:before{background:0 0!important;box-shadow:none!important;color:#000!important;text-shadow:none!important;}
img{page-break-inside:avoid;}
img{max-width:100%!important;}
h3{orphans:3;widows:3;}
h3{page-break-after:avoid;}
}
*,:after,:before{box-sizing:border-box;moz-box-sizing:border-box;webkit-box-sizing:border-box;}
img{vertical-align:middle;}
h3{color:inherit;font-family:inherit;font-weight:400;line-height:1;}
h3{margin-bottom:.5em;margin-top:1em;}
h3{font-size:2.15em;}
.container{margin-left:auto;margin-right:auto;padding-left:10px;padding-right:10px;}
@media (min-width:768px){
.container{width:790px;}
}
@media (min-width:992px){
.container{width:960px;}
}
@media (min-width:1200px){
.container{width:1160px;}
}
.container:after,.container:before{content:" ";display:table;}
.container:after{clear:both;}
.global-block{position:relative;}
.global-block .container{padding:77em 5em;}
h3{margin-bottom:.5em;margin-top:1em;}

@media only screen and (max-width:980px){
.container{max-width:100%!important;min-width:100%!important;height:auto!important;margin:0!important;padding:10px!important;}
}

Comments

[Ankhena]

Дело в том, что все секции (и другие блочные элементы) сами по себе идут друг за другом. Каждая с новой строки.
Даже если вы вообще ничего не напишете в стилях. (Исключения: дочерние гридов, флексов, абсолюты...)

А дальше нужно выяснить зачем вы задали им абсолюты и вывели из потока.
И убрать лишние.

[Emil7676]

Благодарю

Answer 1

[ArtJH]

Нужно у обеих секции убрать свойство absolute. Тогда элементы сами по себе станут в ряд друг за другом

Comments

[Emil7676]

Благодарю