Html 创建不同的CSS层

你好，我是css新手，需要一些帮助。我想在CSS中为我的网站创建3层，这样看起来就像我在下面提供的图片

我将如何在CSS中设置它？任何帮助都将不胜感激

---

谢谢。

您想了解z-index属性。但基本上，任何应用

z-index

的东西都需要设置

位置

。。。我很确定

静态

不起作用，但

绝对

相对

&

固定

都可以。那你就可以点了。例如：

.div-background{
  z-index:1;
  position:relative;
}
.div-middle{
  z-index:2;
  position:relative;
}
.div-front{
  z-index:3;
  position:relative;
}

---

有意义吗？

您所要做的就是将模式的背景img添加到css中 下面是一个代码示例

div {
background: url(../images/purpalt.png) repeat; 
}

[

此处使用的CSS将在bootstrap.CSS之后应用*/ /*定制集装箱*/ .货柜已满{ 保证金：0自动； 宽度：100%； 背景:#666； } 琼伯伦先生{ 背景：黑色； 身高：553px； } .集装箱{ 背景：#ccc； 填充：15px 10px； 身高：553px； 宽度：960px； } .图像框{ 背景：#fff； 文本对齐：居中； 高度：500px； } 页脚{ 背景：橙色； 高度：190px； 我想去这里

---

您没有提供任何类型的标记，因此很难评估您的情况。这里有一个关于如何创建MCVE的指南：我只需要知道是否有可能创建具有以下背景的3个不同容器，以及我将如何操作？谢谢。简短回答：是的，有可能。然后，没有任何标记p我们应该如何提供帮助？因此，提供一个具体的问题陈述来说明您迄今为止所做的尝试是有帮助的。您应该从学习如何编写代码开始，然后返回一个代码，如果有任何问题，我们可以查看并修复。非常感谢。是的，这很有意义，我将对此进行研究，并了解我的做法。谢谢t、 在我的页面底部添加一个页脚，这让我进步了一点。唯一的问题是，页脚卡在那里了，而且对于较长的页面，它不会移动。我的html代码是，©；

，css是.footer{背景色：#F6861F；宽度：1920px；高度：190px；位置：固定；}

/* CSS used here will be applied after bootstrap.css */

/* Custom container */
.container-full {
  margin: 0 auto;
  width: 100%;
  background: #666;
}

.jumbotron {
    background: black;
  height: 553px;

  }

.container {
    background: #ccc;
    padding: 15px 10px;
    height: 553px;
    width: 960px;
  }

  .image-box {
    background: #fff;
      text-align: center;
      height: 500px;
    }

  footer {
      background: orange;
      height: 190px;


<div class="container-full">

      <div class="jumbotron">

      </div>

  <div class="container">
    <div class="col-md-12">
      <div class="image-box">
    Image to go here

      </div>
    </div>


  </div>    


</div> <!-- /container full -->
<footer></footer>