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

Question

Учитывая, что элемент HTML отображается где-то на странице?

Как я могу сделать еще один html, чтобы он полностью перекрывал его?

Чтобы дать представление о том, я пытался что-то вроде этого, но он не работает, если HTML элемент ввода находится в нижней части страницы, и мне нужно Прокрутите вниз, чтобы достигнуть его

function createOverlap(elem) { 
    var rect = elem.getBoundingClientRect(); 
    over.style.position = 'absolute'; 
    over.style.top = rect.top+'px'; 
    over.style.left= rect.left+'px'; 
    over.style.height = rect.height+'px'; 
    over.style.width= rect.width+'px'; 
    return over; 
} 

Answer 1

Это Безразлично» t, что «over» является элементом DOM, кроме этого, вы очень близки.

Смотрите эту скрипку: http://jsfiddle.net/7em2g/

function createOverlap(elem) { 
    var rect = elem.getBoundingClientRect(); 
    var over = document.createElement('div'); 
    over.style.position = 'absolute'; 
    over.style.top = rect.top+'px'; 
    over.style.left= rect.left+'px'; 
    over.style.height = rect.height+'px'; 
    over.style.width= rect.width+'px'; 
    return over; 
} 
var bar = createOverlap(document.getElementById('foo')); 
bar.style.backgroundColor = 'rgba(255,0,0,0.3)'; 
document.body.appendChild(bar); 

Um Это не делает разницы, если вы прокрутите вниз здесь. Если у вас все еще есть проблемы, нам понадобится дополнительная информация о проблеме.