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のいずれかでなければなりません。上の要素のうちの少なくとも1つにの位置（デフォルト）のz-indexがあります。