Question

我在页面上定位元素，其中一个元素不会移动（输入类型=“图像”）。我想知道为什么它没有移动，因为所有其他元素都在移动。这是我的代码：

.search {
  position: relative;
  display: inline;
}

.search-bar {
  width: 45%;
  height: 50px;
  border: 1px solid black;
  position: absolute;
  top: 50%;
  left: 27.5%;
  padding: 5px 5px;
  z-index: -2;
}

#search-button {
  width: ;
  height: ;
  border: 5px solid rgb(255, 84, 132);
  border-radius: 100px 45px 100px 45px;
  postition: absolute;
  top: 500px;
  left: 50%;
  z-index: -1;
}

.logo {
  position: absolute;
  top: 29.9%;
  left: 36.25%;
  width: 27.5%;
  display: inline;
}

<body>
  <!--change image to logo and alt to name-->
  <img class="logo" alt="logo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHdn3LhI9Zg829h1vZVJQ4Ngk-6bFqXdAdw2pf8fycGVcl_lO3ow"><br>


  <!--search bar-->
  <!--fill in action and check if target is correct-->
  <form action="hey" target="_self" method="get">
    <input class="search-bar" type="text" name="search-bar" placeholder="Search..." autofocus>
    <input id="search-button" alt="logo" type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXZJ6ZoHbGStW2ZFfY1Ewb6Ev_-is9K0UWpzgulaC81HkOSFM">

  </form>


</body>

Answer 1

position拼错了作为帖子。还包括空宽度和高度规则的值。

.search {
  position: relative;
  display: inline;
}

.search-bar {
  width: 45%;
  height: 50px;
  border: 1px solid black;
  position: absolute;
  top: 50%;
  left: 27.5%;
  padding: 5px 5px;
  z-index: -2;
}

#search-button {
  width: 20px;
  height: 20px;
  border: 5px solid rgb(255, 84, 132);
  border-radius: 5px;
  position: absolute;
  top: 500px;
  left: 50%;
  z-index: -1;
}

.logo {
  position: absolute;
  top: 29.9%;
  left: 36.25%;
  width: 27.5%;
  display: inline;
}

<body>
  <!--change image to logo and alt to name-->
  <img class="logo" alt="logo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHdn3LhI9Zg829h1vZVJQ4Ngk-6bFqXdAdw2pf8fycGVcl_lO3ow"><br>


  <!--search bar-->
  <!--fill in action and check if target is correct-->
  <form action="hey" target="_self" method="get">
    <input class="search-bar" type="text" name="search-bar" placeholder="Search..." autofocus>
    <input id="search-button" alt="logo" type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXZJ6ZoHbGStW2ZFfY1Ewb6Ev_-is9K0UWpzgulaC81HkOSFM">

  </form>


</body>

Answer 2

#search-button{
    width:;
    height:;
}

您缺少高度和宽度，这使得这些无效并且没有应用任何其他规则（如位置或顶部）。删除这些或输入可接受的值来解决问题。

使用CSS定位<input />

2 个答案: