@tostershmoster

Как отменить position relative absolute?

section call отображается на offer, а нужно чтобы call отображалась после offer, как если бы к offer не применялись position relative и absolute

<section class="offer"><img class="offer__img" src="/assets/img/first-bg.jpg" alt="background">
    <div class="offer__title">
      <h1 class="offer__title-heading">Taste your fav dish</h1>
      <p class="offer__title-desc">from <span>luxury restaurant!</span></p>
    </div>
  </section>
  <section class="call">
    <div class="phone d-flex ml-auto mr-auto">
      <div class="phone__text">
        <div class="phone__text__call">call us now for<span>home delivery</span></div>
      </div>
      <div class="phone__digits">1-008-005-007</div>
    </div>
  </section>


section.offer{
  padding: 0 0;
  height: 100%;
}
.offer{
  position: relative;
  width: 100%;
  margin-top: 17px;
  @media screen and (max-width: $desktopWidth){
    margin-top: 0px;
  }
}
.offer::after{
  position: static;
}
.offer__img{
  position: absolute;
  display: inline-block;
  width: 100%;
  background: no-repeat center top;
  background-size: cover;
}
.offer__title{
  position: absolute;
  padding: 216px 0 0px 73px;
  text-shadow: 5px 5px 4px black, 0 0 1em black;
  @media screen and (max-width: $tableWidth){
    padding-top: 130px;
    padding-left: 45px;
  }
  @media screen and (max-width: $phoneWidth){
    padding-top: 80px;
    padding-left: 30px;
  }
  @media screen and (max-width: $smPhoneWidth){
    padding-top: 50px;
    padding-left: 20px;
  }
}
.offer__title-heading{
  font-size: 56px;
	letter-spacing: -0.3px;
  color: $mainFontColor;
  @media screen and (max-width: $tableWidth){
    font-size: 40px;
  }
  @media screen and (max-width: $phoneWidth){
    font-size: 30px;
  }
  @media screen and (max-width: $smPhoneWidth){
    font-size: 25px;
  }
}
.offer__title-desc{
	font-size: 40px;
	color: $mainFontColor;
	font-family: 'Playfair Display', serif;
	line-height: 1em;
	margin-left: 3px;
  letter-spacing: -0.2px;
  @media screen and (max-width: $tableWidth){
    font-size: 30px;
  }
  @media screen and (max-width: $phoneWidth){
    font-size: 20px;
  }
}
.offer__title-desc span{
	color: $primary-color;
}


.call{
	background: #edf1f3;
  border-bottom: 1px solid #dde3e7;
  width: 100%;
  padding: 0 0;
}
.phone{
	text-transform: uppercase;
	font-weight: 700;
	width: 470px;
}
.phone__text{
	background: url('/assets/img/phone.png') no-repeat left center;
	padding: 12px 0 12px 56px;
	color: #14141d;
	font-size: 14px;
	font-family: 'Sintony', sans-serif;
	width: 180px;
	margin: 29px 25px 26px 0;
}
.phone__text__call{
	display: block;
	line-height: 10px;
	font-size: 14px;
	padding: 0 0 15 0px;
}
.phone__text span{
	font-size: 16px;
	display: block;
	margin: 5px 0 0 -1px;
}
.phone__digits{
	font-size: 32px;
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	margin: 23px 0 0 0px;
	color: #000;
}
  • Вопрос задан
  • 79 просмотров
Пригласить эксперта
Ответы на вопрос 3
@ArtJH
section call отображается на offer а должна быть под ней. В данном случае используй css свойство z-index.
Ответ написан
HunteR-VRX
@HunteR-VRX
Помешанный на WEB
Для перехода от абсолютного и/или относительного позиционирования, используйте статическое позиционирование - position: static;
Ответ написан
Tim-A-2020
@Tim-A-2020
Помог? Отметь решением
.call{
  position: static !important;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы