Question

有人可以解释为什么以下图标尽管在绝对位置上却没有显示在下面代码的输入栏中？

谢谢

<div style="position: relative;">
    <input type="text" style="height: 32px; width: 100%">
    <img style="position: absolute; right: 0; height: 32px" src="https://cms-assets.tutsplus.com/uploads/users/523/posts/27345/preview_image/search-icon-large.png" alt="">
</div>

Answer 1

position:absolute可能会导致某些外观/可见性问题。您可以使用background-image选项在输入的右侧添加搜索图标。

   input {
  background: url("https://cms-assets.tutsplus.com/uploads/users/523/posts/27345/preview_image/search-icon-large.png") no-repeat;
  background-size: auto 32px;
  background-position: right center;
  height: 32px;
  width: 100%;
  border: 1px solid #4B89DA
}

<input type="text" placeholder="Enter keywords here..." />

Answer 2

它正在运行，但是您还需要指定一个top位置：

<div style="position: relative;">
    <input type="text" style="height: 32px; width: 100%">
    <img style="position: absolute; top: 0; right: 0; height: 32px" src="https://cms-assets.tutsplus.com/uploads/users/523/posts/27345/preview_image/search-icon-large.png" alt="">
</div>

为什么图像不尊重位置绝对？

2 个答案: