Html 为什么我的内容出现在外面？

有一个按钮，可以点击它来打开div'1234变体选项'。 我试图为“1234变体选项”div添加一个标题，但问题是当div应该“关闭”时，它也会出现

以下是我尝试过的：

.overlay{
/*高度和宽度取决于您想要显示覆盖的方式（请参见下面的JS）*/
身高：100%；
宽度：0；
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
左：0；
排名：0；
背景色：rgb（0,0,0）；/*黑色后备色*/
背景色：rgba（0,0,0,0.8）；/*黑色，不透明度*/
过渡：0.5s；/*0.5秒过渡效果以滑入或滑下覆盖层（高度或宽度，取决于分隔缝）*/
}
.overlay.closebtn{
颜色：白色；
位置：绝对位置；
顶部：50px；
右：40px；
字体大小：25px；
}
.closebtn:悬停{
文字装饰：无；
}
.叠加标题{
}
.覆盖内容{
/*位置：相对位置*/
位置：绝对位置；
宽度：100%；
身高：75%；
/*文本对齐：居中*/
边缘顶部：10px；
溢出：滚动；
}

测试
&时代；

尝试添加此样式：

#1234-variation-options{
    overflow:hidden;
}

您需要添加

.overlay {
 overflow:hidden;
}

.overlay{
/*高度和宽度取决于您想要显示覆盖的方式（请参见下面的JS）*/
身高：100%；
宽度：0；
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
左：0；
排名：0；
背景色：rgb（0,0,0）；/*黑色后备色*/
背景色：rgba（0,0,0,0.8）；/*黑色，不透明度*/
过渡：0.5s；/*0.5秒过渡效果以滑入或滑下覆盖层（高度或宽度，取决于分隔缝）*/
溢出：隐藏；
}
.overlay.closebtn{
颜色：白色；
位置：绝对位置；
顶部：50px；
右：40px；
字体大小：25px；
}
.closebtn:悬停{
文字装饰：无；
}
.叠加标题{
}
.覆盖内容{
/*位置：相对位置*/
位置：绝对位置；
宽度：100%；
身高：75%；
/*文本对齐：居中*/
边缘顶部：10px；
溢出：滚动；
}

测试
&时代；

您也可以使用jQuery来代替CSS。使用

hide（）

功能可以将其隐藏，单击按钮时可以使其显示。只需将其添加到js文件中，但如果还没有jQuery库，请确保添加jQuery库

$(document).ready(function(){

    $('h1').hide();

    $('.variation-options').click(function(){
        $('h1').fadeIn();
    });

    $('.closebtn').click(function(){
        $('h1').fadeOut();
    });

});

---

看看这个

为什么不使用javascript/jQuery呢？我知道JS可以用于此，但我当前的问题是，数据已经超出了它应该显示的范围，甚至在我希望它出现之前。谢谢大家的回复。