css 如何相对父div移动div内部的项

arknldoa  于 2023-06-25  发布在  其他
关注(0)|答案(1)|浏览(150)

我成功地将“选择”按钮显示在div中我想要的位置。但很快我意识到,它只有当我悬停在它上时才能工作(我正在试验悬停和在div上定位),但没有悬停的3个按钮只出现在一个特定的位置,我不明白为什么它会在那里。
也许你们知道这个问题的答案谢谢
对不起,这里的代码很乱,我很新。
code snippets

<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      ul {
        display: flex;
      }

      li {
        list-style: none;
        padding: 15px;
      }

      #header-img {
        display: flex;
        width: 50px;
        height: 50px;
      }

      @media screen and (max-width: 600px) {
        #video {
          width: fit-content;
        }
      }

      #container {
        width: 80%;
        margin: 200px auto 200px auto;
        display: flex;
        justify-content: space-around;
      }

      .choices {
        background-color: rgb(241, 241, 111);
        width: 250px;
        height: 400px;
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.7);
      }

      .choices .pilih {
        position: absolute;
        left: 40%;
        top: 350px;
      }

      .choices:hover {
        transform: scale(1.5);
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5)
      }

    </style>
    <title>Document</title>
  </head>

  <body>
    <header id="header">
      <img src="https://png.pngtree.com/element_pic/16/05/30/11574bb301599cc.jpg" alt="" id="header-img">
      <nav id="nav-bar">
        <ul>
          <li><a href="#video" class="nav-link">Features</a></li>
          <li><a href="#video" class="nav-link">How it works</a></li>
          <li><a href="#video" class="nav-link">Pricing</a></li>
        </ul>
      </nav>
    </header>
    <div id="container">
      <div class="choices">
        <form action="">
          <input type="button" value="choose" class="pilih">
        </form>
      </div>
      <div class="choices">
        <form action="">
          <input type="button" value="choose" class="pilih">
        </form>
      </div>
      <div class="choices">
        <form action="">
          <input type="button" value="choose" class="pilih">
        </form>
      </div>
    </div>
  </body>

</html>
66bbxpm5

66bbxpm51#

1.当您设置任何元素位置:absolute时,它设置其相对于body的位置(默认情况下)。
1.在你的例子中,要相对于特定容器进行定位,你需要将它的父容器(带有类选项)设置为“position:相对”

header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      ul {
        display: flex;
      }

      li {
        list-style: none;
        padding: 15px;
      }

      #header-img {
        display: flex;
        width: 50px;
        height: 50px;
      }

      @media screen and (max-width: 600px) {
        #video {
          width: fit-content;
        }
      }

      #container {
        width: 80%;
        margin: 200px auto 200px auto;
        display: flex;
        justify-content: space-around;
      }

      .choices {
        background-color: rgb(241, 241, 111);
        width: 250px;
        height: 400px;
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.7);
        position: relative;
      }

      .choices .pilih {
        position: absolute;
        left: 25%;
        top: 50%;
      }

      .choices:hover {
        transform: scale(1.5);
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5)
      }
<header id="header">
      <img src="https://png.pngtree.com/element_pic/16/05/30/11574bb301599cc.jpg" alt="" id="header-img">
      <nav id="nav-bar">
        <ul>
          <li><a href="#video" class="nav-link">Features</a></li>
          <li><a href="#video" class="nav-link">How it works</a></li>
          <li><a href="#video" class="nav-link">Pricing</a></li>
        </ul>
      </nav>
    </header>
    <div id="container">
      <div class="choices">
        <form action="">
          <input type="button" value="choose" class="pilih">
        </form>
      </div>
      <div class="choices">
        <form action="">
          <input type="button" value="choose" class="pilih">
        </form>
      </div>
      <div class="choices">
        <form action="">
          <input type="button" value="choose" class="pilih">
        </form>
      </div>
    </div>

相关问题