Javascript CSS中的按钮位置

我最近试用了带有expand和collapse的div。一切都很完美。这是我用“展开”和“收拢”按钮将条固定的小提琴，每当我增加div的字体大小时，按钮就不会与div成比例地一起出现。这是我所期待的小提琴。

您可以看到按钮位于div之外。是否有一种方法可以显示附加到div的按钮，即使我更改了字体大小

任何建议都很好

---

谢谢。

顶部的

值为
100%
无论字体大小，按钮都会固定在容器上

现场查看（我还添加了CSS规范化）
您可以使用
底部：-49px而不是
顶部：36px

$(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");
    }        
});

}))


我想这就是你想要的效果，在这种情况下，你可以随意更改固定div的字体大小，其余元素的大小将相应调整，布局将保留下来
@kangoroo两者
$(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;
}