Question

刚开始编码CSS并遇到一个问题（元素是“ strip”），当我编译代码时，这个问题似乎是不可见的。如果我将元素的位置设置为“绝对”，则它似乎会出现，但是我需要使用“相对”来显示它，这似乎不起作用。

我所指的div的类是“ strip”，这时应该在所有其他元素之前显示为红色块。

我尝试弄乱z-index，但这似乎并没有改变任何东西。

CSS：

.banner {
    z-index: 2;
    position: relative;
    height: 56px;
    width: 100%;
    background-color: #F8F8F8;
    margin: 0;
    border-bottom-width: 1px;
    border-bottom-color: #C6C6C6;
    border-bottom-style: solid;
}

.header {
    position: relative;
    z-index: 3;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: center;
    font-family: "Titillium Web Regular", sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    bottom: 58px;
}

.logo img {
    position: relative;
    z-index: 4;
    height: 50px;
    width: 44px;
    left: 3px;
    bottom: 114px;
}

.strip {
    position: relative;
    bottom: 200px;
    height: 100%;
    width: 50%;
    background-color: red;
    z-index: 5;
}

body {
    background-color: #d1e1ff;
    margin: 0;
}

HTML：

<!DOCTYPE html>

<head>
    <link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>

<body>

    <div class = banner>
    </div>

    <div class = header>
        <h1>club quiz<h1>
    </div>

    <div class = logo>
        <img src = "https://myuwastudentguild.com/wp-content/uploads/2015/02/UWA_Student_Guild_Corpo15A_Black.png"/>
    </div>

  <div class = strip>
  </div>

</body>

这时，“ strip”类中的应当在所有其他元素之前显示为红色块，但是它是不可见的。

Current Layout

Desired Layout 基本上，我只是想添加一个沿页面中心向下移动的面板

Answer 1

如果您只想让它使用相对，那么您要做的就是在CSS内设置一个固定的高度

.strip {
    height:200px;
}

并且您在代码中使用了很多position:relative，这是不必要的。因此，请查看CSS中的定位方式。这样可以使您轻松得多。

Answer 2

对类height使用修订strip：

.banner {
    z-index: 2;
    position: relative;
    height: 56px;
    width: 100%;
    background-color: #F8F8F8;
    margin: 0;
    border-bottom-width: 1px;
    border-bottom-color: #C6C6C6;
    border-bottom-style: solid;
}

.header {
    position: relative;
    z-index: 3;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: center;
    font-family: "Titillium Web Regular", sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    bottom: 58px;
}

.logo img {
    position: relative;
    z-index: 4;
    height: 50px;
    width: 44px;
    left: 3px;
    bottom: 114px;
}

.strip {
    position: relative;
    bottom: 200px;
    height: 100px;
    width: 50%;
    background-color: red;
    z-index: 5;
}

body {
    background-color: #d1e1ff;
    margin: 0;
}

<!DOCTYPE html>

<head>
    <link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>

<body>

    <div class = banner>
    </div>

    <div class = header>
        <h1>club quiz<h1>
    </div>

    <div class = logo>
        <img src = "https://myuwastudentguild.com/wp-content/uploads/2015/02/UWA_Student_Guild_Corpo15A_Black.png"/>
    </div>

  <div class = strip>
  </div>

</body>

Answer 3

Thanveer建议的内容旁边

确切的情况是-当您拥有

position:absolute; height:100%

它将占据屏幕的100％，然后您说bottom:200px，因此它将把div的{{1}}（相对于您的身体而言）推向{{ 1}}。当您希望此元素具有

(0,0)

它将占据 parent 元素的100％，在您的情况下，该元素是没有任何高度的主体。

所以解决方案是在身体上定义一些固定高度

(0, -200)

OR

在position:relative; height:100%上创建父包装器，并在该包装器上分配一些高度。

body
{
  background-color: #d1e1ff;
  margin: 0;
  height:500px;
}

在尝试使用.strip时请记住。它将是... ... <div style="height:100px"> <div class="strip"></div> </div> ... ...元素（x，y）的实际位置，然后将其向上推200 px，将位置变为（x，y-200）。

检查Fiddle

希望有帮助。

块元素在页面上不可见

3 个答案: