html - 在输入元素上叠加一个 div

Question

我有一个包含所有这些元素的 div:

<div id="container">
  <input type="text" />
  <div id="click"></div>
</div>

我想以某种方式设置样式，使 id=click 的 div 位于输入元素的右上角。

我应用于文本的 CSS 是:

text-align: left;
width: 400px;

在我的 click div 中我有:

width: 30px;
height: 30px;

基本上它看起来像这样:

[____INPUT___________________{DIV}]

我不确定如何设置 div 的样式以便将其定位在输入元素上。现在它就在它的右边。

Answer 1

您可以为 div#click 使用 position:absolute 来控制它，但要确保 #container 具有 position:相对

JS Fiddle

#container{
  margin:0 auto;
  width:300px;
  position:relative;
  outline:2px solid #060;
}
#container #click{
  width:40px;
  line-height:36px;
  background-color:#090;
  color:white;
  text-align:center;
  position:absolute;
  right:0;
  top:0;
}
#container input[type="text"]{
  width:298px;
  height:30px;
  padding:right:40px;
}

<br>
<div id="container">
  <input type="text" />
  <div id="click">GO</div>
</div>