Question

我正在尝试制作一个布局，其中id="txt-bar"的某些文字会与id="image"重叠，而id="main-content-area"也会与id="image"内容重叠。但是在以下布局中，id="main-content-area"和id="footer"之间会出现一些空格。我不知道如何解决这个问题。我是html和css的新手，请帮助我。

＆＃13;

body{
  position:absolute;
}
#top-bar{
  background-color:black;

  color:white;
}

#txt-bar{
  height:40px;
  background-color:pink;
  position:relative;
  z-index:4;
}


#link-bar{

  background-color:red;
  height:40px;
  z-index:4;
}


#image{
  position:relative;
  z-index:3;
}

.line{
  width: 100%;
  position:relative;
  border-bottom: 4px solid black;
}

#main-content-area{
  position:relative;
  background-color:red;
  top:-60px;
  z-index:4;
}
#footer{
  background-color:green;

  position:relative;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row" id="top-bar">
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
    <div class="col-sm-4">
      <h4> Some links </h4>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-2"></div>
    <div class="col-sm-4" id="txt-bar">
      <h1>Greetings</h1>
    </div>
    <div class="col-sm-4" id="link-bar"></div>
    <div class="col-sm-2"></div>
  </div>
  <div class="row">
    <div class="col-sm-12" id="image">
      <img src="me.jpg" class="img-responsive"/>
    </div>

  </div>
  <div class="line"></div>
  <div class="row" >
    <div class="col-sm-2">
    </div>
    <div class="col-sm-8" id="main-content-area">
      <div class="col-sm-12" style="background-color:green">
        <h3>Welcome </h3>
      </div>
      <div class="row">
        <div class="col-sm-4">
          <img src="download.jpg" class="img-responsive"/>
        </div>

        <div class="col-sm-4">
          <img src="download.jpg" class="img-responsive"/>
        </div>
        <div class="col-sm-4">
          <img src="download.jpg" class="img-responsive"/>
        </div>
      </div>
    </div>
    <div class="col-sm-2"></div>
  </div>

  <div class="row" id="footer">
    <div class="col-sm-12">
      <div class="col-sm-6">
        <h4>some text........</h4>
      </div>
      <div class="col-sm-6">
        <h4>some link </h4>
      </div>
    </div>
  </div>	
</div>

＆＃13;

Answer 1

如果您使用的是z-index，则该元素的排名必须为absolute或fixed或relative。至少其中一个元素的z-index位置为static（默认值）。

CSS中的重叠问题

1 个答案: