定位元素问题

Question

我正在尝试制作#txt-bar和#main-content-area在#image上重叠的布局。 （#txt-bar与以下CSS重叠#image但是如果我在#main-content-area使用#image，则top:-60px与#main-content-area重叠会在#main-content-area和#footer之间留下空隙。我不知道如何解决这个问题。请帮帮我。

＆＃13;

＆＃13;

/* CSS */

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 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6" id="txt-bar">
      <h1>Greetings</h1>
    </div>
    <div class="col-sm-6" id="link-bar">
      <h1>Link bar </h1>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12" id="image">
      <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" 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">
      <h1>Main content area </h1>
    </div>
    <div class="col-sm-2">
    </div>
  </div>
  <div class="row" id="footer">
    <div class="col-sm-12">
      <h1>Footer Element </h1>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将所有div（#txt-bar #main-content-area和#image）包含在position:relative的父div中，然后使用position:absolute代替#main-content-area和{{ 1}}，这将解决您的问题。

#txt-bar

.wrap{position:relative;max-width:300px;}
#txt-bar {
  height: 40px;
  background-color: pink;
  position: absolute;
  top:10px;
  width:100%;
}
#main-content-area {
  position: absolute;
  bottom:10px;
  width:100%;
  background-color: red;
}

<强> More Info