Question

我目前有两个容器。其中一个容器有两个div堆叠在一起（img和text）。那样就好。但似乎底部容器堆放在第一个容器的顶部。

<div class="container">
  <div id='map'>
    <div id='image'>
      <img src="/static/usa.png">
    </div>
    <div id='states'>
      <div class="col-md-12">
      <center>
        <h2>Select Your State</h2>
      Select your state from the list below to find information specific to your area.
      </center>
      </div>
      <div class="col-md-2">
        state
      </div>
      <div class="col-md-2">
        state
      </div>
      <div class="col-md-2">
        state
      </div>
      <div class="col-md-2">
        state
      </div>
      <div class="col-md-2">
        state
      </div>
      <div class="col-md-2">
        state
      </div>
    </div>
  </div>
</div>
<div class="container">
  <center>
  <h1>Information on ...</h1>
    This site is a beta framework

  </center>
</div>

我的css文件是

img {
    width:100%;
    opacity: 0.4;
}

#map { position: relative; }
#image {position: absolute;}
#states {
    position: absolute;
}


span {
  display: inline-block;
  vertical-align: middle;}

a {
    color: black;
}

Answer 1

尝试将clear:both;添加到底部容器

Answer 2

我通过回答它而不是试图将图像叠加到背景图像静态。

body {
    background-image: url("/static/usa.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

底部容器堆叠在中间容器的顶部

2 个答案: