时间戳

首页 > 解决方案 > 是否可以将块下方

堵塞？

html - 是否可以将块下方
堵塞？

问题描述

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>

我有盒子和盒子。我试图用标题框盖住容器框。问题是该框一次又一次地被 , 框覆盖。

我不确定我是否解释得当，因为英语不是我的母语。无论如何，提前谢谢。

标签： htmlcss

解决方案

只需将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 属性用于使元素与其他元素重叠。

推荐阅读