Come posso posizionare un elemento esattamente sopra un altro elemento?

Come posiziono perfettamente un elemento di input su un altro elemento?

Sono vicino, ma non lì. Si prega di consultare https://output.jsbin.com/yivitupaqe/1

Come si vede, l’ input viene leggermente abbassato per gli esempi 1, 2 e 3. Potrei risolverlo eliminando lo stile sugli elementi a cui è stato aggiunto l’input, ma non desidero farlo. Per l’esempio 4, è molto lontano e penso che sarà necessario avere jQuery in qualche modo per rilevare se l’elemento originale è un elemento sostituito o non sostituito.

PS. Si prega di fornire una spiegazione di ciò che provoca questo comportamento.

 function overlayInput(e) { var margin = e.css('margin-top') + ' ' + e.css('margin-right') + ' ' + e.css('margin-bottom') + ' ' + e.css('margin-left'); var input = $('', { type: 'file', name: 'bla', style: 'position:absolute;top: 0; bottom: 0; left: 0; right: 0;cursor:pointer;z-index:9999;opacity:0;filter:alpha(opacity=0);height:' + e.outerHeight(false) + 'px;width:' + e.outerWidth(false) + 'px;padding:0;margin:' + margin //Padding shouldn't matter }); e.wrap($('
', { style: 'position:relative; display:' + e.css('display') + ';margin:0;padding:0' })) .parent().append(input); console.log(e, input[0]) } $(function() { var e1 = $('#e1'), e2 = $('#e2'), e3 = $('#e3'), e4 = $('#e4'); overlayInput(e1); overlayInput(e2); overlayInput(e3); overlayInput(e4); });
 #e1, #e2, #e3, #e4 { border: 5px solid black; margin: 10px; padding: 5px; background-color: yellow; } #e2 { width: 300px; } div { margin-top: 50px; } 
  
Example 1 (non-replaced inline element)Hellobla bla bla
Example 2 (block element with width)

Hello

bla bla bla
Example 3 (block element without width)

Hello

bla bla bla
Example 4 (non-replaced inline element) hibla bla bla

Ho impiegato un po ‘di tempo e ho ricreato il tuo codice jsbin in jsfiddle, semplificandolo e cercando di illustrare il mio consiglio nei commenti. È un po ‘complicato che gli elementi target siano di tipi diversi, quindi si vedono effetti leggermente diversi, ma per la parte principale, gli elementi target sono coperti dagli elementi di input .

I punti chiave sono:

  • gli elementi di destinazione ‘originali’ hanno gli stili di display e width che vengono aggiunti al div esterno che avvolge tutto, ha anche la position: relative regola position: relative
  • dopo aver avvolto l’elemento originale e nel nuovo div , prendi le dimensioni esterne del div
  • l’ input interno può quindi avere gli stili standard absolute e 0 posizione insieme alla stessa larghezza e altezza del div esterno

Questo ci dà i risultati:

  • Esempio 1: copre completamente il testo del collegamento, ma non il riempimento superiore e inferiore
  • Esempio 2: copre completamente la scatola gialla ad eccezione del bordo equivalente del bordo minuscolo sul lato destro
  • Esempio 3: copre completamente la casella gialla
  • Esempio 4: copre completamente la casella gialla, ma si sovrappone leggermente per gli equivalenti al bordo quando non viene trovata alcuna immagine

Speriamo che questo sia sufficiente per lavorare con e modificare ulteriormente per ottenere i livelli esatti di copertura degli elementi che è necessario, possibilmente gestire diversi tipi di elementi objective per ottenere aree di copertura esatte.

https://jsfiddle.net/sc7y67q0/1/