Javascript 按钮定位在完全错误的位置

我有一个包含两个不同部分的网页。每个都是视口的高度。其中一个在中间有一个“工作”按钮。单击此按钮后，该选项将消失，并且某些链接将显示在原来的位置。同样的情况也适用于下一节

我正在尝试添加一个重置功能，以删除链接并重新添加按钮。我最初试图让一个按钮重置所有部分，但在那之后没有工作，我现在试图为每个部分制作一个单独的按钮

我已经这样做了，但我的问题是，第二部分的重置按钮出现在与第一部分相同的位置。两者都应该出现在各自部分的右下部分

函数openSites（类别类型）{
如果（类别类型==“工作”）{
var sites=document.getElementById（“工作站点”）；
var button=document.getElementById（“工作按钮”）；
}else if（类别类型==“其他”）{
var sites=document.getElementById（“其他站点”）；
var按钮=document.getElementById（“其他按钮”）；
}
sites.classList.add（“show”）；
sites.classList.remove（“hide”）；
按钮。类列表。添加（“隐藏”）；
}
功能重置（类别类型）{
如果（类别类型==“工作”）{
var sites=document.getElementById（“工作站点”）；
var button=document.getElementById（“工作按钮”）；
}else if（类别类型==“其他”）{
var sites=document.getElementById（“其他站点”）；
var按钮=document.getElementById（“其他按钮”）；
}
sites.classList.remove（“show”）；
sites.classList.add（“hide”）；
按钮。类列表。删除（“隐藏”）；
}
函数betterReset（）{
对于（document.getElementsByClassName（“类别容器”）中的类别）{
文件编写（类别）；
}
}

*{
保证金：0；
填充：0；
框大小：边框框；
}
.第页{
显示：内联块；
溢出：隐藏；
宽度：100%；
高度：100vh；
}
#第1页{
显示：块；
背景色：#3faae4；
}
#第2页{
显示：块；
背景色：#ffffff；
}
.指针{
光标：指针；
}
#工作{
身高：100%；
宽度：100%；
}
#其他{
身高：100%；
宽度：100%；
}
#工地{
身高：100%；
宽度：100%；
}
#其他站点{
身高：100%；
宽度：100%；
}
.地点{
列表样式类型：无；
身高：100%；
}
.地点{
填充：50px 0px；
柔性生长：1；
文本对齐：居中；
}
.中心{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.类别容器{
身高：100%；
}
.类别按钮{
边框：实心0.5px；
填充：60px；
}
.纽扣{
位置：绝对位置；
边框：实心0.5px；
边界半径：5px；
右：3px；
底部：0px；
宽度：70px；
高度：35px；
}
.表演{
显示：块；
}
.隐藏{
显示：无；
}

尼克的网站



重置




重置2

您正在为重置按钮提供一个

位置：绝对。这使得它们使用
位置：relative
，相对于下一个父项，获取
right
和
bottom
的值。在这种情况下，是
body
标记

要解决此问题，请将
position:relative
添加到父div

#workSites,
#otherSites {
  position: relative;
}

希望这有帮助：>
函数openSites（类别类型）{
如果（类别类型==“工作”）{
var sites=document.getElementById（“工作站点”）；
var button=document.getElementById（“工作按钮”）；
}else if（类别类型==“其他”）{
var sites=document.getElementById（“其他站点”）；
var按钮=document.getElementById（“其他按钮”）；
}
sites.classList.add（“show”）；
sites.classList.remove（“hide”）；
按钮。类列表。添加（“隐藏”）；
}
功能重置（类别类型）{
如果（类别类型==“工作”）{
var sites=document.getElementById（“工作站点”）；
var button=document.getElementById（“工作按钮”）；
}else if（类别类型==“其他”）{
var sites=document.getElementById（“其他站点”）；
var按钮=document.getElementById（“其他按钮”）；
}
sites.classList.remove（“show”）；
sites.classList.add（“hide”）；
按钮。类列表。删除（“隐藏”）；
}
函数betterReset（）{
对于（document.getElementsByClassName（“类别容器”）中的类别）{
文件编写（类别）；
}
}
*{
保证金：0；
填充：0；
框大小：边框框；
}
.第页{
显示：内联块；
溢出：隐藏；
宽度：100%；
高度：100vh；
}
#第1页{
显示：块；
背景色：#3faae4；
}
#第2页{
显示：块；
背景色：#ffffff；
}
.指针{
光标：指针；
}
#工作{
身高：100%；
宽度：100%；
}
#其他{
身高：100%；
宽度：100%；
}
#工地{
身高：100%；
宽度：100%；
}
#其他站点{
身高：100%；
宽度：100%；
}
.地点{
列表样式类型：无；
身高：100%；
}
.地点{
填充：50px 0px；
柔性生长：1；
文本对齐：居中；
}
.中心{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.类别容器{
身高：100%；
}
.类别按钮{
边框：实心0.5px；
填充：60px；
}
.纽扣{
位置：绝对位置；
边框：实心0.5px；
边界半径：5px；
右：3px；
底部：0px；
宽度：70px；
高度：35px；
}
.表演{
显示：块；
}
.隐藏{
显示：无；
}
#工地，
#其他站点{
位置：相对位置；
}

尼克的