Различение перемещение и фиксированные DIVs в HTML на основе CSS

Я учусь некоторые разработки внешнего интерфейса и наткнулся на this webpage example Различение перемещение и фиксированные DIVs в HTML на основе CSS

Это простой веб-страницы с телом сделаны исключительно из divs

Это ниже фиксированный div, когда я говорю «fixed», я имею в виду, когда я изменяю размер браузера снизу или слева, справа div не настраивается, и он выходит из поля зрения.

<div style="background-color: #292929; color: white; position: absolute; left: 0px; top: 80px; width: 100px; height: 300px; padding: 5px; padding-right: 20px;">This will be the navigation 'column', which will run down the left of the page.</div>

в то время как ниже один движется

<div style="position: absolute; left: 10px; bottom: 100px; background-color: #0099CC; padding: 5px; color: white; border: 5px white groove; font-size: 13pt;">I could go on, but I think you see the brilliance of these things.</div>

оба дивы имеют абсолютное позиционирование, но первое или фиксированной div имеет позиционирование для верхней определяется как ` Единственное отличие, что я см., что первый или фиксированный как

top: 80px \\for fixed div

в то время как это

bottom: 100px \\for the moving div

Мой вопрос, почему только нижний атрибут в CSS для этого DIV помещает его в другой слой, а сверху не делать то же самое для фиксированного DIV? Или, может быть, есть что-то еще?

источник

2016-03-27 Anirudh

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

@ freestock.tk Вы действительно попытались спуститься по верхней границе? для меня он остается припаркованным в любом случае. – Anirudh

@Airudh Я сделал это gif Я надеюсь, что это может быть полезно [** нажмите здесь **] (https://i.gyazo.com/0fc2b6405b1a3311ac4d731f523f601b.gif) (gif моего экрана, пока я перетаскиваю верхний край окна, изменяя его размер) обратите внимание на синее полевое пребывание на своем месте, потому что нижняя часть страницы не движется, а только верх. –

Абсолютное позиционирование зависит от его родительского элемента. Если div вложен в другой div с любым позиционированием, кроме статического (по умолчанию), тогда он будет отображаться абсолютным для этого div, а не телом или страницей. Я не уверен, что вы подразумеваете под словом. Если вы хотите сложить divs, вы можете использовать z-index, чтобы поставить один над другим.

EDIT: В верхнем левом углу браузера всегда оставаться на 0,0 единственное, что меняется на изменение размера в нижнем правом координаты

источник

2016-03-27 07:57:16 Robert

мой вопрос в том, почему divs в тени желтого цвета ... вообще не двигаются при изменении размера окна? – Anirudh

Нижняя позиция div всегда будет на 100 пикселей снизу, потому что она абсолютно позиционируется, если вы измените размер браузера, она будет следовать за браузером и останется на 100 пикселей выше дна. https://jsfiddle.net/fvtjyppf/ – Robert

, но почему же это не наблюдается, когда div имеет атрибут top: 80px при изменении размера сверху? он никуда не денется. : | – Anirudh

Различение перемещение и фиксированные DIVs в HTML на основе CSS

ответ

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