疊加在輸入元素的頂部

Question

我有一個包含所有這些元素一個div一個div：

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

我想在某種程度上的作風，使得div與id=click將在右上角輸入元素。

我申請文本的CSS是：

text-align: left; 
width: 400px; 

在我click DIV我有：

width: 30px; 
height: 30px; 

本質上，它是這樣的：

[____INPUT___________________{DIV}] 

我不是確定如何設置div的樣式，以便將其定位在輸入元素上。現在它直接躺在它的右邊。

Answer 1

* { 
 
    box-sizing: border-box; /* gives padding and border from inside */ 
 
} 
 
#container { 
 
    position: relative; /* for absolute child element */ 
 
    display: inline-block; /* to take the width of the input */ 
 
} 
 
input { 
 
    text-align: left; 
 
    width: 400px; 
 
    height: 30px; /* added to match the height of the #click div */ 
 
    outline: 0; /* to remove outline when focused */ 
 
} 
 
#click { 
 
    width: 30px; 
 
    height: 30px; 
 
    position: absolute; /* to align it to right and positon it over the input */ 
 
    top: 0; 
 
    right: 0; 
 
    background: lightgrey; 
 
}

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

Answer 2

嘗試下面的樣式。

<div id="container"> 
    <input type="text" style="float: left;" /> 
    <div id="click" style="float: left; position: relative; left: -30px;"></div> 
</div> 

如果您的潛水屬於文本框，請嘗試應用z-index。

Answer 3

您可以使用float:right至click div。

Answer 4

可以添加CSS當你在DIV

點擊

float : right; 
margin-left : (as many pixel you want)px;   

Answer 5

你應該嘗試DIV#click元素

display:inline 

財產。就像我在這個fiddle

Answer 6

也可以使用position:absolute爲div#click來控制它，但要確保在#container具有position:relative

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>