Расположите элемент в конце документа в верхней части страницы. - PullRequest
Новая
       0

Расположите элемент в конце документа в верхней части страницы.

1 голос
/ 27 января 2011

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

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

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

Ответы [ 4 ]

2 голосов
/ 27 января 2011

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

Однако вы можете использовать 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

2 голосов
/ 27 января 2011

Альтернативой ответу Cybernate является использование position: fixed для этого.

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

2 голосов
/ 27 января 2011

Вы можете использовать position: absolute для элемента div, а затем назначить margin-top для элемента body, который равен возможной высоте div.

1 голос
/ 27 января 2011

Если вы используете 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, вышеупомянутый код можно сократить до одной строки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...