将按钮完全放置在错误的位置

Question

I've got a webpage with 2 different sections. 我有一个包含2个不同部分的网页。 Each are the height of the viewport. 每个都是视口的高度。 One has a button 'work' in the center. 一个在中间有一个按钮“工作”。 When this is clicked, that disappears and some links appear where it was. 单击此按钮后，该链接消失，并且某些链接显示在原位置。 The same sort of thing applies for the next section. 下一节也适用相同的内容。

I'm trying to add a reset function to remove the links and add the buttons back. 我正在尝试添加一个重置功能，以删除链接并向后添加按钮。 I originally tried to make one button reset all sections but, after that didn't work, I'm now trying to make an individual button for each section. 我最初试图使所有部分复位为一个按钮，但是在此之后不起作用了，现在我试图为每个部分设置一个单独的按钮。

I've done this but my problem is that the second section's reset button appears in the same place as the first section's one. 我已经做到了，但是我的问题是第二部分的重置按钮与第一部分的重置按钮出现在同一位置。 Both should appear at the bottom right section of their respective sections. 两者都应出现在其相应部分的右下部分。

 function openSites(categoryType) { if (categoryType == "work") { var sites = document.getElementById("workSites"); var button = document.getElementById("workButton"); } else if (categoryType == "other") { var sites = document.getElementById("otherSites"); var button = document.getElementById("otherButton"); } sites.classList.add("show"); sites.classList.remove("hide"); button.classList.add("hide"); } function reset(categoryType) { if (categoryType == "work") { var sites = document.getElementById("workSites"); var button = document.getElementById("workButton"); } else if (categoryType == "other") { var sites = document.getElementById("otherSites"); var button = document.getElementById("otherButton"); } sites.classList.remove("show"); sites.classList.add("hide"); button.classList.remove("hide"); } function betterReset() { for (category in document.getElementsByClassName("category-container")) { document.write(category); } }

 * { margin: 0; padding: 0; box-sizing: border-box; } .page { display: inline-block; overflow: hidden; width: 100%; height: 100vh; } #page-1 { display: block; background-color: #3faae4; } #page-2 { display: block; background-color: #ffffff; } .pointer { cursor: pointer; } #work { height: 100%; width: 100%; } #other { height: 100%; width: 100%; } #workSites { height: 100%; width: 100%; } #otherSites { height: 100%; width: 100%; } .sites { list-style-type: none; height: 100%; } .site { padding: 50px 0px; flex-grow: 1; text-align: center; } .center { display: flex; align-items: center; justify-content: center; } .category-container { height: 100%; } .category-button { border: solid 0.5px; padding: 60px; } .buttonClose { position: absolute; border: solid 0.5px; border-radius: 5px; right: 3px; bottom: 0px; width: 70px; height: 35px; } .show { display: block; } .hide { display: none; }

 <!DOCTYPE html> <html> <head> <title>Nick's site</title> <link rel="stylesheet" type="text/css" href="./styles3.css"> <meta name="viewport" content="width= device-width, inital-scale=1"> </head> <body> <div id="page-1" class="page"> <div id="work"> <div id="workButton" class="category-container center"> <a class="category-button pointer" onclick="openSites('work')">Work</a> </div> <div id="workSites" class="hide"> <ul class="sites center"> <li class="site"><a class="pointer" href="#">Printfactory</a></li> <li class="site"><a class="pointer" href="#">Henry's Site</a></li> </ul> <button onclick="reset('work')" class="buttonClose pointer" style="z-index: 2;"> Reset </button> </div> </div> </div> <div id="page-2" class="page"> <div id="other"> <div id="otherButton" class="category-container center"> <a class="category-button pointer" onclick="openSites('other')">Other</a> </div> <div id="otherSites" class="hide"> <ul class="sites center"> <li class="site"><a class="pointer" href="#">#</a></li> <li class="site"><a class="pointer" href="#">#</a></li> <li class="site"><a class="pointer" href="#">#</a></li> </ul> <button onclick="reset('other')" class="buttonClose pointer" style="z-index: 2;"> Reset2 </button> </div> </div> </div> </body> </html>

Answer 1

You are giving a position:absolute tu your reset buttons. 您的position:absolute要重置按钮。 This make them take the values of right and bottom relative to next parent with position:relative .In this case being the body tag. 这使它们相对于具有position:relative下一个父级获取right和bottom的值，在这种情况下为body标签。

To fix this, add position:relative to your parent divs. 要解决此问题，请向您的父div添加position:relative 。

#workSites,
#otherSites {
  position: relative;
}

Hope this helps :> 希望这会有所帮助：>

 function openSites(categoryType) { if (categoryType == "work") { var sites = document.getElementById("workSites"); var button = document.getElementById("workButton"); } else if (categoryType == "other") { var sites = document.getElementById("otherSites"); var button = document.getElementById("otherButton"); } sites.classList.add("show"); sites.classList.remove("hide"); button.classList.add("hide"); } function reset(categoryType) { if (categoryType == "work") { var sites = document.getElementById("workSites"); var button = document.getElementById("workButton"); } else if (categoryType == "other") { var sites = document.getElementById("otherSites"); var button = document.getElementById("otherButton"); } sites.classList.remove("show"); sites.classList.add("hide"); button.classList.remove("hide"); } function betterReset() { for (category in document.getElementsByClassName("category-container")){ document.write(category); } }

 * { margin: 0; padding: 0; box-sizing: border-box; } .page { display: inline-block; overflow: hidden; width: 100%; height: 100vh; } #page-1 { display: block; background-color: #3faae4; } #page-2 { display: block; background-color: #ffffff; } .pointer { cursor: pointer; } #work { height: 100%; width: 100%; } #other { height: 100%; width: 100%; } #workSites { height: 100%; width: 100%; } #otherSites { height: 100%; width: 100%; } .sites { list-style-type: none; height: 100%; } .site { padding: 50px 0px; flex-grow: 1; text-align: center; } .center { display: flex; align-items: center; justify-content: center; } .category-container { height: 100%; } .category-button { border: solid 0.5px; padding: 60px; } .buttonClose { position: absolute; border: solid 0.5px; border-radius: 5px; right: 3px; bottom: 0px; width: 70px; height: 35px; } .show { display: block; } .hide { display: none; } #workSites, #otherSites { position: relative; }

 <!DOCTYPE html> <html> <head> <title>Nick's site</title> <link rel="stylesheet" type="text/css" href="./styles3.css"> <meta name="viewport" content="width= device-width, inital-scale=1"> </head> <body> <div id="page-1" class="page"> <div id="work"> <div id="workButton" class="category-container center"> <a class="category-button pointer" onclick="openSites('work')">Work</a> </div> <div id="workSites" class="hide"> <ul class="sites center"> <li class="site"><a class="pointer" href="#">Printfactory</a></li> <li class="site"><a class="pointer" href="#">Henry's Site</a></li> </ul> <button onclick="reset('work')" class="buttonClose pointer" style="z-index: 2;"> Reset </button> </div> </div> </div> <div id="page-2" class="page"> <div id="other"> <div id="otherButton" class="category-container center"> <a class="category-button pointer" onclick="openSites('other')">Other</a> </div> <div id="otherSites" class="hide"> <ul class="sites center"> <li class="site"><a class="pointer" href="#">#</a></li> <li class="site"><a class="pointer" href="#">#</a></li> <li class="site"><a class="pointer" href="#">#</a></li> </ul> <button onclick="reset('other')" class="buttonClose pointer" style="z-index: 2;"> Reset2 </button> </div> </div> </div> </body> </html>

将按钮完全放置在错误的位置

问题描述

1 个解决方案

解决方案1
3 已采纳 2018-07-02 16:25:54

将按钮完全放置在错误的位置

问题描述

1 个解决方案

解决方案1 3 已采纳 2018-07-02 16:25:54

解决方案1
3 已采纳 2018-07-02 16:25:54