0

Всем привет, есть флексовые, относительно спозиционированные, элементы:

.header {
  height: 10vh;
  justify-content: space-between;
  align-items: center;
  display: flex;
  width: 90%;
  position: relative;
  z-index: 3;
}

.main-text {
  position: relative;
  left: -150px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.main-btn {
  position: relative;
  display: flex;
  left: -380px;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  width: 250px;
  height: 48px;
  background-color: #2A7CF8;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 1.5rem;
  border-radius: 30px;
}
<div class="header">
  <div class="main-text">
    <H1>экспертный центр</H1>
    <p class="subtitile">сертификация товаров и услуг</p>
  </div>
  <div class="main-btn">
    <a href="#">Заказать консультацию</a>
  </div>
  <div class="p3">
    <p class="p3p">Консультация онлайн 24/7</p>
    <p class="p3p">Гарантированный результат</p>
    <p class="p3p">Широкий спектр услуг</p>
  </div>
</div>

Вопрос, как избежать отрицательных значений left, если необходимо все элементы, указанные выше, отобразить по левому краю?

9
  • что сделать? нужно больше описания
    – Yamich
    2 дек 2019 в 7:05
  • Нужно, что бы h1,p и элемент main-btn - кнопка переместились в левый край, я использовал отрицательные значение left -150px, но при уменьшении размеров экрана они уезжают влево за границу этого экрана, вопрос как это сделать что бы не было такого
    – Genjo
    2 дек 2019 в 9:33
  • я так и не понял тебе их нужно вряд поставить? что значит фраза "переместились в левый край" или тебе нужно их в столбец поставить
    – Yamich
    2 дек 2019 в 9:36
  • Мне нужно что бы они были в столбец выровнены по левому краю экрана с отступом например 20 пикселей от края
    – Genjo
    2 дек 2019 в 10:11
  • codepen.io/yamich/pen/xxbxOZL ? возможно я не правильно понял
    – Yamich
    2 дек 2019 в 10:35

1 ответ 1

0

Разобрался с этим сам, ошибка была следующая, не учёл наследования от родительского элемента, код решения ниже (закоментировал то что было до):

.header{
    /*height: 10vh;*/
    justify-content: space-between;
    align-items: center;
    display: flex;
    width: 90%;  
    max-width: 1199px;
    position: relative;
    z-index: 3;
}
.main-text{
    width: 100%;
    display: flex;
    position: relative;
    /*left: -150px;*/
    z-index: 2;
    display: flex;
    flex-direction: column;
    /*justify-content: left;*/
    /*text-align: left;*/

}
.main-btn{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    width: 250px;
    height: 48px;
    background-color: #2A7CF8;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 1.5rem;
    margin-left: 4rem;
    border-radius: 30px;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.