Поместите элемент с конца документа вверху страницы

У меня есть div непосредственно перед тегом </body> документа (до окончания документа). И я хочу отобразить этот div в верхней части страницы с помощью CSS или JavaScript.Поместите элемент с конца документа вверху страницы

Я знаю о position:absolute;. Проблема в том, что если я его использую, div будет отображаться поверх другого содержимого, расположенного в верхней части, а не до этого содержимого.

Так есть ли другой способ сделать это?

источник

2011-01-27 Alex

@Alex: может быть, я не совсем понимаю, но почему вы не положили этот div в начале? –

, потому что этот div предназначен для отладки, и его содержимое может измениться до тех пор, пока весь документ не закончит отображение ... – Alex

@Alex: Вы понимаете, что вы можете отображать любой элемент в любом месте страницы независимо от его положения потока в источнике HTML? И для таких информационных divs 'position: fixed; top: 0;' кажется идеальным. И их действительно не нужно ставить как «тело» ребенка. –

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

источник

2011-01-27 08:13:17 Chandu

div имеет переменную height :( – Alex

Я не совсем уверен, понимаю ли я вашу проблему, но что вы могли do - это сочетание «position: absolute» и «z-index: 10», чтобы установить уровень, на котором расположен каждый div (здесь вы должны установить, вероятно, более одного z-индекса, то есть содержащего div для обеспечения x-браузера) – redbull

@Alex: Если вы можете использовать javascript для этого, то при событии загрузки окна установите document.getElementsByTagName («body») [0] .style.marginTop = .clientHeight; – Chandu

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

Вы могли бы использовать JQuery для клонирования содержимого и добавить его где-то рядом с вершиной. Вы также можете запросить высоту div и использовать JQuery для установки верхнего поля тела.

Обе из них позволят ему уважать встроенный поток, но он не использует CSS, на который ссылается ваш вопрос; если вы хотите, я могу помочь с JQuery.

Edit:

<script type="text/javascript"> 
     window.onload = function() { 

     document.getElementById("content").style.marginTop = document.getElementById("errorDisplay").offsetHeight + "px"; 

     } 
    </script>

я играл с этим в jsfiddle - Это было на самом деле вел себя странно ... но это было определенно близко к работе. Я использовал wrapper и content вместо того, чтобы манипулировать всем телом (просто немного безопаснее, я думаю.) Убедитесь, что вы добавили + "px" в конце команды, иначе это не сработает.

Вот скрипка ...

http://jsfiddle.net/pVn2W/

Как вы можете видеть, это толкает всю обертку вниз, а не только «содержание» ... используя «содержание» или «обертка» в первый аргумент не меняет ничего странного.

Не совсем ваша модель, но все же упражнение в достижении тех же целей, - может быть, это поможет вам шаг ближе: P

источник

2011-01-27 08:17:42 jlmakes

спасибо, но мне понадобится чистое решение для javascript, так как это div содержит отладочные сообщения, и один из них может быть «jquery не загружен» :) – Alex

@Alex вы можете увидеть какой-то javascript, с которым я играл ... убедитесь, что вы добавили '+" px "' в конце. Кибернетит забыл включить его: P – jlmakes

Альтернативы ответа Cybernate является использование позиции: фиксированный сделать это ,

Этот div, однако, всегда будет на высоте даже при прокрутке. Это здорово для бара «уведомления», но раздражает, если вы используете его для неправильного рода вещи :)

источник

2011-01-27 08:17:43

Это правильное позиционирование для таких элементов, которые являются чисто информационными для развития. Вы всегда показываете их в одной и той же позиции независимо от прокрутки или чего-либо еще. –

При использовании JavaScript вариант, вы можете просто сделать это:

// For demonstration I am creating a <div id="mydiv">Hello World</div> 
// Appending it to <body> means it goes to the very bottom of the body tag 
var div = document.createElement("div"); 
div.id="mydiv"; 
div.innerHTML = "Hello World"; 
document.getElementsByTagName("body")[0].appendChild(div); 
// In your case I assume that the div is already present inside the HTML source 
// just before </body>, So no need to do the above 
document.getElementsByTagName("body")[0].insertBefore(
    document.getElementById("mydiv"), 
    document.getElementsByTagName("body")[0].firstChild 
);

Скопируйте и вставьте приведенный выше код в консоли для демонстрации. Если вы используете jQuery, вышеупомянутый код можно уменьшить до одной строки.

источник

2011-01-27 08:32:15

Поместите элемент с конца документа вверху страницы

ответ

Смежные вопросы