0

Верстаю лендинг и один блок упрямо лезет на предыдущий, вместо того, чтобы идти за ним.

.fifth-part {
  width: 100%;
  height: 50.833em;
  display: block;
  position: absolute;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.7);
}
.backgr {
  height: 100%;
  width: 100%;
}
.big-img {
  width: 25.750em;
  height: 35.500em;
  display: block;
  padding-left: 30em;
  padding-top: 2.7em;
  z-index: 3;
}
.small-img {
  width: 20.667em;
  height: 35.833em;
  display: block;
  padding-left: 45em;
  padding-top: 9em;
  position: absolute;
  z-index: 5;
}
/*слайдер*/

.sixth-part {
  width: 100%;
  height: 24.167em;
  // background: #f8f8f8;
  position: absolute;
  overflow: hidden;
  background: pink;
}
.quote-img_s {
  width: 5.000em;
  height: 5.417em;
}
<div class="fifth-part">
  <div class="fifth-part_s">
    <img class="backgr" src="images/45.jpg" alt="#">
    <span class="one">We work with</span>
    <span class="two">AMAZING SERVICES</span>
    <span class="no-text_no">_____</span>
    <img class="big-img" src="images/p.png" alt="#">
    <img class="small-img" src="images/White.png" alt="#">
  </div>
</div>

<!--слайдер -->
<div class="sixth-part">
  <div class="sixth-part_s">
    <div class="quote-img">
      <img class="quote-img_s" src="images/SPEECH.png" alt="#">
    </div>
    <div class="quote-text">
      <span class="quote-text_quote">"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi placeat, laborum ratione laboriosam reprehenderit modi magni. Quaerat doloribus a aliquam necessitatibus explicabo, esse aliquid laudantium porro. Voluptatum alias nihil iusto."</span>
      <span class="quote-text_autor">John Doe</span>
    </div>
  </div>
</div>

Для наглядности блок, который должен быть внизу, сделала с розовым фоном

2
  • потому, что оба блока в position: absolute;
    – Alex
    15 окт 2016 в 20:45
  • исправила, работает, спасибо)
    – Anastasiia
    15 окт 2016 в 20:48

1 ответ 1

0

один блок упрямо лезет на предыдущий, вместо того, чтобы идти за ним

потому, что оба блока fifth-part и sixth-part имеют свойство position: absolute;

Ваш ответ

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

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