Overlay un div in cima ad un elemento di input

Question

Ho un div che contiene tutti questi elementi:

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

voglio per lo stile in un modo in modo che il div con id=click sarà nell'angolo destro della l'elemento di input.

Il CSS ho applicato in testo è:

text-align: left; 
width: 400px; 

Nel mio click div ho:

width: 30px; 
height: 30px; 

In sostanza sarebbe simile a questa:

[____INPUT___________________{DIV}] 

io non sono certo come si può modare il div in modo da posizionarlo sopra l'elemento di input. In questo momento si trova direttamente a destra di esso.

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

Prova lo stile di seguito.

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

Se l'immersione va sotto la casella di testo, provate ad applicare z-index.

Answer 3

È possibile utilizzare float:right a click div.

Answer 4

È possibile aggiungere un CSS quando si fa clic su div

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

Answer 5

si dovrebbe cercare

display:inline 

proprietà su DIV#click elemento. come ho fatto in questo fiddle

Answer 6

È possibile utilizzare position:absolute per la div#click a controllarlo, ma assicurarsi che il #container ha 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>