0

Понимаю, что ответ на вопрос скорей всего нет. Но как тогда можно решить мою задачу? Хедер прижат к верху страницы и должен быть выше всех блоков по z оси. Но некоторые блоки должны быть ниже контента по z. В примере header-top должен быть выше контента, a header-bottom ниже.

.wrapper {
  position: relative;
  width: 350px;
  border: 1px solid;
  height: 300px;
  overflow: scroll;
  padding-top: 100px;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 350px;
  padding: 10px;
  height: 100px;
  background-color: #efefef;
  z-index: 10;
}

.header-top {
  position: relative;
  padding: 10px;
  background-color: red;
  z-index: 30;
}

.header-bottom {
  padding: 10px;
  background-color: green;
}

.content {
  position: relative;
  z-index: 20;
}
<div class="wrapper">
  <div class="header">
    <div class="header-top">Header top</div>
    <div class="header-bottom">Header bottom</div>
  </div>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam dignissimos molestiae voluptatem nostrum neque dolore velit, consequuntur repellat magnam quos error nobis eius aut vitae commodi exercitationem vero maxime in?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam dignissimos molestiae voluptatem nostrum neque dolore velit, consequuntur repellat magnam quos error nobis eius aut vitae commodi exercitationem vero maxime in?
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam dignissimos molestiae voluptatem nostrum neque dolore velit, consequuntur repellat magnam quos error nobis eius aut vitae commodi exercitationem vero maxime in?
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam dignissimos molestiae voluptatem nostrum neque dolore velit, consequuntur repellat magnam quos error nobis eius aut vitae commodi exercitationem vero maxime in?
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam dignissimos molestiae voluptatem nostrum neque dolore velit, consequuntur repellat magnam quos error nobis eius aut vitae commodi exercitationem vero maxime in?
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam dignissimos molestiae voluptatem nostrum neque dolore velit, consequuntur repellat magnam quos error nobis eius aut vitae commodi exercitationem vero maxime in?
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam dignissimos molestiae voluptatem nostrum neque dolore velit, consequuntur repellat magnam quos error nobis eius aut vitae commodi exercitationem vero maxime in?
    </p>
  </div>
</div>

8
  • @MaximLensky хедер хедер... Ось z перпендикулярна экрану. 21 фев 2020 в 11:01
  • @Григорий, а как ты хочешь, чтобы выглядело? При прокрутке показывался только красный?
    – Grundy
    21 фев 2020 в 11:05
  • @Grundy мне нужно что бы при прокрутке хедер с серым фоном и header-top были выше контента, но при этом header-bottom был ниже. 21 фев 2020 в 11:08
  • @Григорий, сделай картинку как это должно выглядеть, сейчас непонятно
    – Grundy
    21 фев 2020 в 11:13
  • @Grundy, да криво описал. Ну в общем вот так. prnt.sc/r5nzb4 То есть красный блок должен быть выше контента, а зелёный ниже. 21 фев 2020 в 12:22

1 ответ 1

1

Если рассмотреть и чуть чуть поменять вёрстку - вот так - вынуть из общего блока header-top и header-bottom то возможно

* {
  box-sizing: border-box;
}

.wrapper {
  width: 500px;
  overflow-Y: auto;
  overflow-X: hidden;
  height: 500px;
}

.header {
  padding: 20px 0;
  background: red;
  position: fixed;
  top: 0;
  left: 0;
  width: 500px;
  z-index: 30;
}

.header-bottom {
  width: 500px;
  position: sticky;
  top: 60px;
  margin-left: -20px;
  background: green;
  z-index: 10;
  padding: 10px 0 10px 20px;
  margin-top: 100px;
}

.content {
  position: relative;
  z-index: 20;
  padding: 70px 50px 0 50px;
}
<div class="wrapper">
  <div class="header">
    header
  </div>
  <div class="header-bottom">
    header-bottom
  </div>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta inventore sapiente ipsa numquam nihil cumque alias, natus, quis necessitatibus et ad omnis tempora sunt culpa eius? Obcaecati doloremque quis nihil incidunt fuga neque delectus voluptatum
      recusandae suscipit rem optio soluta dolor excepturi, illum distinctio ea, dolore sed nesciunt unde iste vitae? Iusto laboriosam perferendis adipisci harum quae aliquam est veniam maxime asperiores rerum illum, doloremque dolor eveniet eos, hic
      recusandae atque vero, fugit sit. Explicabo numquam sunt, provident eaque fuga, laudantium consequuntur mollitia officia odit, obcaecati illum eius modi doloremque. Magnam eos consequuntur alias, obcaecati nemo cupiditate autem dolor culpa?
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quo totam laboriosam aspernatur alias ad quidem adipisci esse aliquam! Soluta, perferendis, nihil incidunt blanditiis nam corrupti nesciunt, praesentium consequuntur ipsa nulla dolores hic
      ratione dolore voluptatibus placeat sed aliquam. Modi dolore iusto veniam. Cumque ea tempore ad non quaerat tempora earum, quae fuga libero neque optio sunt beatae facere est, animi magni impedit illum iste mollitia! Rem quasi eius, sequi beatae
      officiis deleniti. Quibusdam culpa consequuntur laborum libero quos est necessitatibus nisi consequatur porro vel facilis dolorum quasi, cum neque cumque perspiciatis repudiandae velit delectus molestiae eligendi? Atque, id rem.
    </p>
  </div>
</div>

Ваш ответ

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

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