Фундаментальный z-индекс для вложенного элемента - PullRequest
Новая
       26

Фундаментальный z-индекс для вложенного элемента

0 голосов
/ 27 ноября 2018

, поэтому я построил свой макет в соответствии с точными спецификациями, но когда я пытаюсь переместить секцию .feat вверх (position: absolute; margin-top: -60px;) поверх элемента заголовка, я сталкиваюсь с проблемами z-index.

У меня естьпрочитайте много постов о настройке элемента заголовка на position: relative;, но это не так.

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

Вот мой codePen с точной настройкой.

Я бы очень хотел получить это, спасибо за ваши предложения.

1 Ответ

0 голосов
/ 28 ноября 2018

Вы можете достичь этого макета, не используя абсолютное позиционирование для ваших различных разделов.Фонд предлагает XY Grid , который можно использовать, как показано в примерах кода / ссылке CodePen ниже:

HTML 

<div class="grid-container fluid">
  <div class="grid-x header">
    <div class="cell auto">
      <h1>Coming to the Stage</h1>
    </div>
  </div>

  <div class="grid-x grid-margin-x">
    <div class="cell medium-8">
      <div class="grid-y h-100">
        <div class="cell shrink">
          <div class="grid-x grid-padding-x synopsis">
            <div class="cell medium-4">
              <p>Synopsis</p>
            </div>
            <div class="cell medium-8">
              <p>Comedy powerhouse Jim Gaffigan has made a career out of finding the extraordinary </p>
            </div>
          </div>
        </div>
        <div class="cell medium-shrink">
          <div class="grid-x grid-padding-x metainfo">
            <div class="cell medium-4">
              <p>Credits</p>
            </div>
            <div class="cell medium-8">
              <div class="grid-x grid-padding-x">
                <div class="cell medium-6">
                  <p>Talent</p>
                </div>
                <div class="cell medium-6">
                  <p>Jim Gaffigan</p>
                </div>
              </div>
              <div class="grid-x grid-padding-x">
                <div class="cell medium-6">
                  <p>Directors</p>
                </div>
                <div class="cell medium-6">
                  <p>Aaron Feldman</p>
                </div>
              </div>
              <div class="grid-x grid-padding-x">
                <div class="cell medium-6">
                  <p>Producters</p>
                </div>
                <div class="cell medium-6">
                  <p>Jim Gaffigans</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cell medium-4">
      <div class="grid-x grid-margin-x">
        <div class="cell medium-10 feat">
          <img src="http://www.comedydynamicsstaging.com/wp-content/uploads/2018/11/unnamed.jpg">
        </div>
        <div class="cell medium-2 pagination">
          1 2 3
        </div>
      </div>
    </div>
  </div>
</div>

<div class="grid-container fluid">
  <div class="grid-x">
    <div class="cell medium-12 extra-meta">
      Extra meta
    </div>
  </div>
</div>

CSS 

body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background: green;
  color: #fff;
  text-align: center;
}

.header {
  height: 285px;
  background: grey;
  text-align: left;
  padding: 1rem;
}

.h-100 {
  height: 100%;
}

.feat img {
  margin-top: -60px;
}

.synopsis {
  background: red;
  height: 100%;
}

.pagination {
  background: blue;
}

.metainfo {
  background: orange;
  height: 100%;
}

@media screen and (max-width: 640px) {
  .metainfo {
    margin-bottom: 60px;
  }
}

.extra-meta {
  background: pink;
  margin-top: 1rem;
  padding: 1rem;
}

Пример CodePen

Ссылка на Пример CodePen здесь .

...