定位元素中的问题

我想要做一个布局，其中#txt-bar和#main-content-area将在#image上重叠。（#txt-bar在#image上与下面的CSS重叠），但是如果我使用top:-60px在#main-content-area时实现#main-content-area上#main-content-area的重叠，那么它将在#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>

来源

2016-12-28 phpLover

什么＃链接吧？它应该来的地方？ – Sharmila

在CSS中使用* {margin：0; padding：0;} –

为什么添加postion：绝对体？ – sol

裹在position:relative父DIV所有div（#txt-bar#main-content-area和#image），然后使用position:absolute为#main-content-area和#txt-bar，这将解决您的问题。

.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

来源

2016-12-28 10:57:49

定位元素中的问题

回答

相关问题