Преобразованный элемент тела с фиксированным положением, выравнивающий тело, а не окно

Question

Преобразованный элемент тела с фиксированным положением, выравнивающий тело, а не окно

0

Я создал фиксированный <div>, задав для него следующие стили:

#mydiv {
    position: fixed;
    left: -150px;
    width: 150px;
    top: 0;
    bottom: 0;
    border: 1px solid #f00;
}

Это создает <div> который находится вне экрана, и, предположительно, такую же высоту, как и окно.

Затем я применяю следующие стили к <body>:

body {
    -webkit-transform: translate(150px, 0);
}

Насколько мне известно, это должно двигаться тело 150px вправо, тем самым перемещая #mydiv в поле зрения. Это работает, но теперь #mydiv - это высота тела, а не высота окна.

Здесь пример JSFiddle

Это ошибка Webkit? Или это то, что я делаю неправильно?

EDIT:

Это похоже на Firefox.

Jeremy Blalock 12 дек. 2013, в 20:28

Источник

0

Я не знаю почему, но причина, по-видимому, в том, что вы применяете свойство transform .
TreeTree 12 дек. 2013, в 19:38

Теги:

html

css

css3

css-position

webkit

1 ответ

Ещё вопросы

Я не знаю почему, но причина, по-видимому, в том, что вы применяете свойство transform .

Jeremy Blalock · Answer 1 · 2013-12-12T18-48-00.000Z

Решение этой проблемы, возможно, не сразу интуитивно, довольно просто.

html, body {
    height: 100%;
}

Обычно position: fixed элементы выравниваются относительно window (родительский элемент html). Однако, когда применяются преобразования css, position: fixed элементы выравниваются относительно ближайшего родителя с примененным преобразованием css.

Возможно, альтернативный подход Webkit и другие браузеры могли бы по-прежнему выровнять position: fixed элементы в window. Но проблема с этим была бы position: fixed div вообще не двигался бы, когда тело было преобразовано, и поэтому div все равно будет располагаться вне экрана.