Проблема с перекрытием в CSS

Question

Я пытаюсь сделать макет, где некоторый текст id="txt-bar" будет перекрываться с id="image" и id="main-content-area" также будет перекрываться до id="image". Но в следующем макете появляется пробел между id="main-content-area" и id="footer". Я не знаю, как это решить. Я новичок в html и 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 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> \t 
 
</div>

Answer 1

Если вы используете z-index положение этого элемента должно быть absolute или fixed или relative. По крайней мере, один из ваших элементов имеет z-index с положением static (по умолчанию).