Issue in positioning elements

Question

I am trying to make a layout where #txt-bar and #main-content-area will overlap on #image. ( #txt-bar is overlapping on #image with following CSS ) but to achieve overlapping of #main-content-area on #image if I use top:-60px at #main-content-area then it will leave a gap between #main-content-area and #footer. I don't know how to solve this issue. Please help me.

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

Wrap all divs (#txt-bar #main-content-area and #image) in a parent div with position:relative then use position:absolute for #main-content-area and #txt-bar, this will solve your issues.

.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