在CSS中的按鈕位置

Question

我最近嘗試了與展開和崩潰div。一切都很完美。這裏是小提琴，我使用固定的擴展和摺疊按鈕，每當我增加div的字體大小然後按鈕不與div按比例。這是我期望清楚的小提琴。 http://jsfiddle.net/vicky081/GyG3w/1/

.btnn 
     { 
      width: auto; 
      height: auto; 
      cursor:pointer; 
      background-color:#02adea; 
      position: absolute; 
      border:solid; 
      margin-left:3%; 
      border-color:#ffffff; 
      border-top-color:#02adea; 
      top:36px; 
      text-align: center; 
      padding-top: 7px; 
      color:white; 
     } 

你可以看到按鈕來股利之外。有沒有辦法顯示連接到div的按鈕，即使我改變字體大小。

任何建議都會很棒。

謝謝。

Answer 1

對於top的值100%無論font-size如何，該按鈕始終粘貼到容器上。

實時查看http://jsfiddle.net/LeBen/UCTgR/（我還添加了一個CSS正常化）

Answer 2

可以使用bottom: -49px;代替top: 36px;

Answer 3

$(document).ready(function() { 
$(".text").hide(); 
$(".btn").click(function(e){ 
    var txt=$(this).html(); 
    var flag = txt==="open"; 
    if(flag){ 
     $(".text").show(); 
     $(this).html("close"); 
    } 
    else{ 
     $(".text").hide(); 
     $(this).html("open"); 
    }   
}); 

}）;

.banner{ 
font-size:1.2em; 
position:fixed; 
width:100%; 
} 
.text { 
background:#02adea; 
text-align:center; 
width:100%; 
} 
.btn{ 
background:#02adea; 
border:5px solid white; 
border-top-color: #02adea; 
color:white; 
text-align:center; 
width:2em; 
} 

http://jsfiddle.net/GyG3w/5/

我想這是你想要的效果，在這一點，你可以儘可能多的你想改變固定div的字體大小，元素的其餘部分將進行相應的調整和佈局被保存