0

I have a div in the main of my website that i would like to over ride some of the header and hide the bottom part of the header. in the example below, i would like the blue square the be 20px higher and hide the bottom of the header. i will appreciate any help.

<div class="header" style="height: 200px;width: 100%;background: yellow;"></div>
 <div class="main" style="height: 800px;background: orange">
  <div class="text" style="height: 100px;width: 50px;background: blue;"></div>
 </div>

Thank you

4

3 回答 3

0

使用该position物业和一些-50px margin为您的.text

jsBin 演示

<div class="header"></div>
<div class="main">
    <div class="text"></div>
</div> 

.header{
  position:relative;
  height: 200px;
  width:100%;
  background: yellow;
}

.main{
  position:relative;
  height: 800px;
  background: orange;
}

.text{
  position:absolute;
  height: 100px;
  width: 50px;
  background: blue;
  margin-top:-50px;
}
于 2013-10-01T11:21:59.653 回答
0

尝试这个

 .main { margin-top: -20px; }
于 2013-10-01T11:17:24.953 回答
0
.main, .text { position:relative; }
.text { top:-20px; }
于 2013-10-01T11:20:28.707 回答