位置決め要素の問題

Question

#imageに#txt-barと#main-content-areaが重複するレイアウトを作成しようとしています。 （#txt-barは、次のCSSで#imageに重なっていますが）#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

ラップposition:relative持つ親のdiv内のすべてのdiv（#txt-bar#main-content-areaと#image）は、これはあなたの問題を解決する、#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