положение: исправлено без использования doctype в IE

Question

Как мы можем исправить элемент на странице HTML, не используя <!doctype>?

Answer 1

Ключ к элементу абсолютной или фиксированной позиции заключается в том, что его родительский элемент (скажем, контейнерный див) должен иметь position:relative;

Например, если у вас есть контейнерный контейнер шириной 960 пикселей ипо центру на странице (как показано ниже):

<div class="container">
   <div id="AbsolutePositionedBox">
        // Box Content Goes Here
   </div>
</div>

CSS для правильной работы будет выглядеть так:

.container{
    width:960px; 
    position: relative;
    margin: 0 auto;
}
    #AbsolutePositionedBox{
        position: // absolute or fixed;
        top: // pixels from the RELATIVE parent (makes it easier to manage);
        LEFT OR RIGHT: // pixels from the RELATIVE parent;
    }

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

Опять же, я бы всегда рекомендовал бы использовать тип документа.

Answer 2

Использование абсолютного позиционирования (например, position: absolute или position: fixed) в стиле ( примеров ):

Абсолют (свитки со страницей):

<style type='text/css'>
#foo {
    position: absolute;
    left: 10px;
    top: 10px;
}
</style>
<div id='foo'>This is foo at 10x10</div>

Или, если вы предпочитаете, встроенный:

<div style='position: absolute; left: 10px; top: 10px;'>This is foo at 10x10</div>

Исправлено (не прокручивается):

<style type='text/css'>
#foo {
    position: fixed;
    right: 10em;
    top: 2em;
}
</style>
<div id='foo'>This is foo at 10x10</div>

Или, если вы предпочитаете, встроенный:

<div style='position: fixed; right: 10em; top: 2em;'>This is foo in the upper right</div>

Или, если вы хотите сделать это с помощью JavaScript (поскольку ваш вопрос изначально был помечен javascript):

var div = document.getElementById('foo');
div.style.position = "absolute"; // or "fixed" or whatever
div.style.left = "10px";
div.style.top = "10px";

---

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