Можно ли поместить блок ниже блока ?

#html #css

#HTML #css

Вопрос:

 header {
  background: blue;
  color: white;
  width: 100%;
}

.container {
  background: green;
  text-align: center;
  width: 100%;
  height: 100px;
  transform: skew(0, -10deg);
  color: white;
  position: relative;
  top: 55px;
}

.container .home{
  position:absolute;
  bottom:0;
}

 <header class="header">
  <div class="logo">
    <i class="fab fa-accusoft"></i>
    <span class="title">DreamCoding</span>
  </div>

  <section class="container">
    <div class="home">
      <div class="title">Alphabet</div>
      <div class="text">
        abcdefg
      </div>
    </div>
  </section>

Развернуть фрагмент

У меня есть поле и поле.
Я пытаюсь закрыть поле контейнера полем заголовка.
Проблема в том, что поле снова и снова закрывалось полем , .

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

Ответ №1:

Просто добавьте z-index свойство к обоим элементам. Выполняемый фрагмент кода ниже:

 header {
  background: blue;
  color: white;
  width: 100%;
  z-index: 1;
}

.container {
  background: green;
  text-align: center;
  width: 100%;
  height: 100px;
  transform: skew(0, -10deg);
  color: white;
  position: relative;
  top: 55px;
  z-index: -1;
}

.container .home {
  position: absolute;
  bottom: 0;
}

 <html>

<body>
  <header class="header">
    <div class="logo">
      <i class="fab fa-accusoft"></i>
      <span class="title">DreamCoding</span>
    </div>

    <section class="container">
      <div class="home">
        <div class="title">Alphabet</div>
        <div class="text">
          abcdefg
        </div>
      </div>
    </section>
  </header>
</body>

</html>

Развернуть фрагмент

** Свойство z-index используется для того, чтобы элементы перекрывали другие.

Ответ №2:

Вы можете установить фон в :before селекторе, используя position:absolute и z-index:-1

 body{
  margin: 0;
}
header {
  background: blue;
  color: white;
  width: 100%;
}

.container {  
  text-align: center;
  width: 100%;
  height: 100px;  
  color: white;
  position: relative;
  top: 55px;
}

.container:before {
  content:"";
  transform: skew(0, -10deg);
  background: green;
  width: 100%;
  height: 100%;
  position:absolute;
  top:-25px;
  left: 0;
  z-index: -1;
}

.container .home{
  position:absolute;
  bottom:0;
}

 <header class="header">
  <div class="logo">
    <i class="fab fa-accusoft"></i>
    <span class="title">DreamCoding</span>
  </div>
  <section class="container">
    <div class="home">
      <div class="title">Alphabet</div>
      <div class="text">
        abcdefg
      </div>
    </div>
  </section>
</header>

Развернуть фрагмент