Контейнеры наслаиваются друг на друга при изменении ширины браузера

@akhenaton · Регистрация: 15.07.2017

Author24 — интернет-сервис помощи студентам

Здравствуйте, начал изучать css и html, пробую создать сайт, но сталкнулся с такой проблемой: при изменении ширины браузера до минимальной, контейнеры наслаиваются друг на друга, пробывал float, менял position, ничего не помогает. Подскажите, в чём проблема.
HTML(3 контейнера)

HTML5

 <div class="burger-bbq">
    <div class="bbq">
     <h2 id="zbbq">BBQ Burger</h2>
    </div>
     <div id="bbq">
      <p>2 beef cutlets, bbq sauce, cucumbers, tomatoes, cheddar cheese</p>
     </div>
      <div class="btn">
       <a href="#"> <span>Buy Now</span></a>
      </div>
  </div>
  <div class="bacon-burger">
    <div class="bacon">
     <h2 id="zbacon">Bacon Burger</h2>
    </div>
     <div id="bacon">
      <p>10 slices of bacon, 2 beef patties, sauce, cheese, cucumber, onion, tomato</p>
     </div>
      <div class="btn">
       <a href="#"> <span>Buy Now</span></a>
      </div>     
  </div>
  <div class="burger-cutlets">
   <div class="cutlets">
    <h2 id="zcutlets">6 Cutlets Burger</h2>
   </div>
     <div id="cutlets">
      <p>6 pork cutlets, cheddar cheese, bbq sauce, cucumbers, tomatoes, 12 bacon flavors</p>
     </div>
      <div class="btn-cutlets">
       <a href="#"><span>Buy Now</span></a>
      </div>
   </div>

CSS :

CSS

.burger-bbq {
    background-color: rgb(44, 42, 42);
    height: 500px;
    position: relative;
    width: 350px;
    top: 154px;
    left: 8.7%;
    border: 2px solid #FFFFFF;
    border-radius: 24px;
    overflow: hidden;
}
 
.bacon-burger {
    background-color: rgb(44, 42, 42);
    height: 500px;
    position: relative;
    width: 350px;
    top: -350px;
    left: 39.5%;
    border: 2px solid #FFFFFF;
    border-radius: 24px;
    overflow: hidden;
}
 
.burger-cutlets {
    background-color: rgb(44, 42, 42);
    height: 500px;
    position: relative;
    width: 350px;
    top: -854px;
    left: 70.8%;
    border: 2px solid #FFFFFF;
    border-radius: 24px;
    overflow: hidden;
}

@mrtoxas · 22.08.2017, 21:02

Уберите у главных блоков position:relative и выстраивайте их без позиционирования.
И двигать по странице элементы с position:relative не очень хорошая затея, которая часто вылазит боком, если не понимаешь про поток документа и принципов позиционирования.

@mrtoxas 3826 / 2676 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	22.08.2017, 21:02	2
	Уберите у главных блоков `position:relative` и выстраивайте их без позиционирования. И двигать по странице элементы с `position:relative` не очень хорошая затея, которая часто вылазит боком, если не понимаешь про поток документа и принципов позиционирования. 0