Как разместить один элемент над другим элементом?

Question

Как разместить элемент input над другим элементом?

Я близко, но не там. Пожалуйста, см. https://output.jsbin.com/yivitupaqe/1

Как видно, input немного подтолкнул примеры 1, 2 и 3. Я мог бы исправить это, избавившись от стиля элементов, которые добавили к нему вход, Это нужно сделать. Для примера 4 это далеко, и я думаю, что мне нужно будет, чтобы jQuery каким-то образом обнаружил, является ли исходный элемент замененным или не замененным элементом.

PS. Просьба дать объяснение причин такого поведения.

function overlayInput(e) { 
 
    var margin = e.css('margin-top') + ' ' + e.css('margin-right') + ' ' + e.css('margin-bottom') + ' ' + e.css('margin-left'); 
 
    var input = $('<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($('<div/>', { 
 
     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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div>Example 1 (non-replaced inline element)<a id="e1" href="javascript:void(0)">Hello</a>bla bla bla</div> 
 
<div>Example 2 (block element with width) 
 
    <p id="e2">Hello</p>bla bla bla</div> 
 
<div>Example 3 (block element without width) 
 
    <p id="e3">Hello</p>bla bla bla</div> 
 
<div>Example 4 (non-replaced inline element) 
 
    <img id="e4" alt="hi" src="http://icons.iconarchive.com/icons/hopstarter/sleek-xp-software/48/Yahoo-Messenger-icon.png" />bla bla bla</div>

Answer 1

Я взял немного времени и воссоздан код jsbin в jsfiddle, упрощая его, пытаясь проиллюстрировать мои советы в комментариях. Немного нереально, когда целевые элементы являются разными типами, поэтому вы видите несколько разные эффекты, но для основной части целевые элементы покрываются элементами input.

Ключевые моменты:

• «оригинал» целевые элементы имеют display и width стили, которые добавляются к внешнему div, который охватывает все, он также имеет position: relative правило
• после оборачивания оригинальный элемент e в новом div, получить внешние размеры div
• внутренний input может иметь стандарт absolute a Стили д 0 положение вместе с одной и той же ширины и высоты в качестве внешнего div

Это дает нам результаты:

• Пример 1 - полностью покрывает текст ссылки, но не сверху и снизу обивка
• Пример 2 - полностью покрывает желтый ящик для крошечных границ эквивалентного края на правой стороне
• примера 3, за исключением - полностью покрывает желтый ящик
• Ex достаточно 4 - полностью покрывает желтый ящик, но слегка перекрывает пограничные эквиваленты, когда изображения не найдено

Надеется, что это будет достаточно для того, чтобы работать с и настроить дальше, чтобы получить точные уровни охвата элементов, которые требуются, возможно, обрабатывать различные типы целевых элементов, чтобы получить точные зоны покрытия.

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