html - 定位元素问题

Question

我正在尝试制作一个布局，其中 #txt-bar 和 #main-content-area 将重叠在 #image 上。 ( #txt-bar 在 #image 上与以下 CSS 重叠)但要实现 #main-content-area 在 上的重叠#image 如果我在 #main-content-area 处使用 top:-60px 那么它会在 #main-content-area 之间留下一个空隙 和 #footer。我不知道如何解决这个问题。请帮助我。

/* 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;
}

<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>

Answer 1

用 将所有 div(#txt-bar #main-content-area 和 #image)包裹在父 div 中position:relative 然后对#main-content-area 和#txt-bar 使用position:absolute，这将解决你的问题问题。

.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;
}

<div class=wrap>
  <div id=txt-bar>txt-bar</div>
  <div id=image><img src=https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300></div>
  <div id=main-content-area>main-content-area</div>
</div>

More Info