如何使对象不使用页面html+css滚动_Html_Css

如何使对象不使用页面html+css滚动

html css

如何使对象不使用页面html+css滚动,html,css,Html,Css,目前，我创建的下拉菜单没有显示在单击它的按钮下。如果向下滚动，它将自由悬停并随页面移动。我需要把它固定好我试着改变位置：固定；位置：相对；但由于某些原因，这会破坏代码，当按钮单击时，下拉菜单不再显示 <!DOCTYPE html> <html> <body id="body"> //this shows the first two buttons for example <ul class="matchup"> <l

目前，我创建的下拉菜单没有显示在单击它的按钮下。如果向下滚动，它将自由悬停并随页面移动。我需要把它固定好

我试着改变位置：固定；位置：相对；但由于某些原因，这会破坏代码，当按钮单击时，下拉菜单不再显示

<!DOCTYPE html>
<html>
<body id="body">
//this shows the first two buttons for example
<ul class="matchup">
            <li class="team team-top">
              <button class="btn drop-down-btn">
                <span class="seed">01</span>
                <span id="team1">&nbsp;</span>
                <span class="score">&nbsp;</span>
              </button>
              <div id="myDropdownTop" class="dropdown-content">
                <button class="open-button teamName" onclick="openFormPF()">Change Team</button></br>
                <button class="open-button teamWinner" onclick="openFormPF()">Establish Winner</button></br>
                <button class="open-button teamScore" onclick="openFormPF()">Set Score</button></br>
              </div>
            </li>
            <li class="team team-bottom">
              <button class="btn drop-down-btn">
                <span class="seed">32</span>
                <span id="team1">&nbsp;</span>
                <span class="score">&nbsp;</span>
              </button>
              <div id="myDropdownBottom" class="dropdown-content">
                <button class="open-button" onclick="openFormPF()">Change Team</button></br>
                <button class="open-button" onclick="openFormPF()">Establish Winner</button></br>
                <button class="open-button" onclick="openFormPF()">Set Score</button></br>
              </div>
            </li>
          </ul>
</body>


<script> //opens dropdown menu when button clicked
    document.querySelectorAll("li.team").forEach(function(teamDom) {
      teamDom.querySelector("button.drop-down-btn").addEventListener("click", function() {
        teamDom.querySelector("div.dropdown-content").classList.toggle("show");
      });
    });
  </script>

<style>
.btn {
    background-color: #FEFEFE;
    color: black;
    padding: 6px 10px;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-bottom: 10px;
    opacity: 1;
  }

.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }

  .btn:hover,
  .btn:focus {
    background-color: #EBEBEB;
  }

  .dropdown {
    position: relative;
    display: inline-block;
  }



  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 200, 0.2);
    z-index: 1;
  }

  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  .dropdown a:hover {
    background-color: #ddd;
  }

  .show {
    display: block;
  }

  .open-button {
    display: show;
    background-color: #555;
    color: white;
    padding: 3px 10px 5px 10px;
    cursor: pointer;
    opacity: 1;
    position: fixed;
    width: 120px;
    height: 30px;
    border: 1px solid #5391CC;
    z-index: 1;
  }

</style>

实际产量：

预期的输出是下拉菜单下拉到所选按钮下方，并且不会随页面滚动。团队类别位置：相对。这样，所有处于绝对位置的子元素都是相对于该元素的

绝对定位元素将始终相对于具有相对位置的最近父元素。如果没有，它将默认为浏览器的边界

这意味着，如果有具有以下样式的绝对定位元素：

.absolute-element {
  position: absolute;
  top: 0;
}

它将显示在网页的最顶端

但是，如果此element.absolute-element的父元素具有此类：

.parent {
  position: relative;
}

.absolute元素将显示在.parent元素框的顶部，而不是浏览器的顶部

在您的情况下，下拉列表将位于每个.team元素的顶部。

只需从类中省略“position:fixed”。打开按钮

作为标题，我在附件代码中这样做

我还移动了“边距底部：10px；”从“按钮”标签转到“li”标签。因此，现在菜单确实出现在按钮下

希望我能帮点忙

document.querySelectorAllli.team.forEachfunctionteamDom{ teamDom.querySelectorbutton.drop-down-btn.addEventListenerclick，函数{ teamDom.querySelectordiv.dropdown-content.classList.toggleshow； }; }; 李{ 边缘底部：10px； } .btn{ 背景色：FEFE；颜色：黑色；填充：6px 10px；边界：无；光标：指针；宽度：100%； /*边缘底部：10px*/ 不透明度：1； } .dropbtn{ 背景色：3498DB；颜色：白色；填充：16px；字体大小：16px；边界：无；光标：指针； } .btn:悬停， .btn:焦点{ 背景色：EBEBEB； } .下拉列表{ 位置：相对位置；显示：内联块； } .下拉内容{ 显示：无；位置：绝对位置；背景色：F1F1；最小宽度：160px；溢出：自动；盒影：0px 8px 16px 0px rgba0,0200,0.2； z指数：1； } .下拉内容a{ 颜色：黑色；填充：12px 16px；文字装饰：无；显示：块； } .下拉菜单a:悬停{ 背景色：ddd； } .表演{ 显示：块； } .打开按钮{ 显示：显示；背景色：555；颜色：白色；填充：3px10px 5px10px；光标：指针；不透明度：1； /*位置：固定*/ 宽度：120px；高度：30px；边框：1px实心5391CC； z指数：1； } 01 变革团队确立胜利者得分 32 变革团队确立胜利者得分 01 变革团队确立胜利者得分 32 变革团队确立胜利者得分 01 变革团队确立胜利者得分 32 变革团队确立胜利者得分 01 变革团队确立胜利者得分 32 变革团队确立胜利者得分 01 变革团队确立胜利者得分 32 变革团队确立胜利者得分 01 变革团队确立胜利者得分 32 变革团队确立胜利者得分 01 变革团队确立胜利者得分 32 变革团队确立胜利者得分 01 变革团队确立胜利者得分 32 变革团队确立胜利者得分

将其移动到“li”标记有助于它正确显示在按钮下，谢谢。但摆脱位置：由于某些原因再次修复会使菜单在单击时不再显示。也许它会以某种方式出现在屏幕上？我不知道为什么它会破坏密码