Как работает position: relative;
Элемент с position: relative; смещается на расстояние, указанное в свойствах top , right , bottom , left , от своего первоначального расположения. Размещение элемента над другими элементами правится с помощью свойства z-index .
После того, как свойство position примет значение relative , размер элемента не изменится, а соседние элементы не сдвинутся на освободившееся пространство.
Переместить элемент над другими элементами
Чтобы элемент «2» спрятался под другой часто неподвижный элемент «1», можно элементу «1» указать position: relative; , при котором не игнорируется свойство z-index .
position: relative;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Элемент «1» Элемент «2» 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
.relative background: lightpink; > .margin Элемент «1» Элемент «2»
Большое количество контекста наложения усложняет работу, поэтому лучше не применять z-index там, где без него можно обойтись.
position: relative; родителя и нижестоящего от родителя элемента z-index: 1; родителя
11 12 13 14 15 16 17 18 19 20
1 2 311 12 13 14 15 16 17 18 19 20
Сместить элемент в сторону так, чтобы соседние элементы остались на своих местах
исходное положение
элемент
position: relative
Cвойства top , right , bottom , left могут иметь как положительные, так и отрицательные значения в любых единицах измерения, а также в процентах. По умолчанию у них установлено значение auto .
position: relative; top: 4em;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 Подвинусь на 3em вниз от первоначального расположения верхнего края элемента 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140
Элемент
Элемент с top: -4em; примет то же положение, что и с bottom: 4em; . Элемент с left: -4em; примет то же положение, что и с right: 4em; .
top: -4em; bottom: 4em;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 Подвинусь на 2em вверх от первоначального расположения верхнего края элемента 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140
Элемент
При одновременном использовании свойств top и bottom , свойство bottom игнорируется. При одновременном использовании свойств left и right , свойство right игнорируется.
top: 4em; right: 4em; bottom: 4em; left: 4em;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 Элемент 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140
Элемент
Значения свойств top и bottom в процентах рассчитываются от высоты содержимого ближайшего не inline родителя, у которого height не auto .
height: 5em; ближнего родителя padding: 1em; ближнего родителя box-sizing: border-box; ближнего родителя
1 2 3 4 5 6 7 8 9 10
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40
Если height ближайшего родителя имеет значение auto , то height в процентах заменяется на height: auto; , при котором не работают свойства top и bottom в процентах у ближайших потомков.
height: 10em; дальнего родителя height: 50%; ближнего родителя
1 2 3 4 5 6 7 8 9 10
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
1 2 3 4 5 6 7 8 9 1011 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 4041 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
Значения свойств left и right в процентах рассчитываются от ширины содержимого ближайшего не inline родителя.
width: 10em; ближнего родителя (для left и right необязательно) padding: 1em; ближнего родителя box-sizing: border-box; ближнего родителя
1 2 3 4 5 6 7 8 9 10
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40
Значения свойств top , right , bottom , left в процентах пропускают inline родителя.
height: 10em; дальнего родителя display: inline-block; ближнего родителя
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
Значение overflow отличное от visible у родителя прячет выходящую за границы часть дочернего элемента с первого экрана видимости.
overflow: visible; родителя (по умолчанию) overflow: auto; родителя overflow: hidden; родителя
1 2 3 4 5 6 7 8 9 10
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40
Указать родителя, в рамках которого будет перемещаться элемент с position: absolute;
position: relative; ближнего родителя
1 2 3 4 5 6 7 8 9 10
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 Элемент 29 30 31 32 33 34 35 36 37 38 39 40 41 42
43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
1 2 3 4 5 6 7 8 9 1011 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 Элемент 29 30 31 32 33 34 35 36 37 38 39 40 41 4243 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
- Передвинуть элемент с помощью свойства CSS margin
- Передвинуть элемент с помощью свойства CSS transform: translate()
Как передвинуть div блок в центр страницы?
https://jsfiddle.net/Ljqf8nrh/
Как поставить DIV (login-container) в самый центр ?
margin: 50% auto;
не помогает.
И еще когда в Header и Footere написал Position:fixed. Теперь они поверх любого элемента, как сделать что бы другие элементы их считали блоками и просто прикасались их а не растворились внутри.
Screen_1
- Вопрос задан более трёх лет назад
- 1958 просмотров
Комментировать
Решения вопроса 3
Сделайте ему обертку с display: flex, justify content: center.
На счет второго вопроса, после присвоения position: fixed блоки выпадают из потока и соседние блоки их не воспринимают. Можно задать соседним блокам отступы, которые компенсировали бы размеры ваших футера и хедера.
Ответ написан более трёх лет назад
Нравится 2 2 комментария
Demigodd @Demigodd Автор вопроса
А можно подробнее с этим display:flex ?
У меня в главном div`e
.login-container
уже есть display: inline-block;
и если его не написать то div будет во всю ширину (Width 100%)
Как в этом случае правильно написать
display: flex;
justify-content: center;
DEATH2298, Подробнее про флексы
Ну можно сделать еще один див-обёртку с display: flex.Или задать .login-container -> display: flex, а форме задать нужные вам размеры
Как передвинуть блок в css
Несомненно, свойство position — один из наиболее мощных инструментов, которым обладают веб-разработчики и дизайнеры. Однако есть в этом свойстве некоторые моменты, которые могут поставить новичков в тупик.
Итак, что же такое позиционирование?
Когда Ваш браузер открывает страницу, он начинает так называемую отрисовку (рендеринг) элементов веб-страницы (блоки div, параграфы, заголовки и т.п.) в том порядке, в котором они появляются в разметке HTML-страницы.
Позиционирование предназначено для того, чтобы упорядочить процесс отображения элементов на странице. Существует 4 типа позиционирования и свойство inherit, предназначенное для обозначения того, что элемент должен наследовать значение родительского элемента:
1. static
2. relative
3. absolute
4. fixed
5. inherit
По умолчанию элементы имеют позиционирование static
По умолчанию ко всем элементам страницы браузер применяет позиционирование static. Такое позиционирование означает, что каждый элемент располагается соответственно естественному порядку — порядку добавления его на страницу.
Блочные элементы располагаются под блочными элементами, строчные элементы располагаются непосредственно друг за другом.
В чем основное отличие между блочными и строчными элементами?
Строчные элементы (inline) по определению не имеют верхнего и нижнего отступа. В общем потоке страницы строчные элементы идут друг за другом, то есть в одной строке. На другую же строку они переходят только тогда, когда доходят до конца строки, либо когда что-то принудительно заставляет их перейти на новую строку.
Блочные элементы (block), в отличие от строчных, в общем потоке страницы располагаются один под другим, по одному в каждой строке.
Относительное позиционирование
Установка свойства position в значение relative сама по себе не производит визуальных изменений на странице. Однако с этих пор мы имеем возможность изменить положение элемента относительно его нормальной позиции, используя свойства top, right, bottom и left.
Данный подход удобно использовать, если нужно сместить элемент, но при этом не привязывать его к жестко заданной позиции на странице.
Фиксированное позиционирование
При использовании position: fixed расположение элемента рассчитывается относительно окна браузера. Это позволяет, например, отображать какие-нибудь панели, навигационные меню и т.п. всегда в одном и том же месте экрана, в не зависимости от использования прокрутки в браузере. Для позиционирования элемента в этом случае точно также используются свойства top, right, bottom и left.
Абсолютное позиционирование
Если элемент абсолютно позиционирован, то другие элементы при этом отображаются на веб-странице так, как будто абсолютно позиционированного элемента и нет.
Положение элемента задается уже описанными выше свойствами left, top, right и bottom. Кроме того, на его положение влияет значение свойства position родительского элемента.
Так, если у родителя значение position установлено как static, либо родителя нет, то отсчет координат ведется от края окна браузера.
Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
Используя свойства позиционирования, можно создать любые шаблоны страниц. В сочетании со свойством z-index Вы можете обойти обычное поведение при отображении элементов (по умолчанию элементы, идущие в коде позже, отображаются поверх элементов, шедших ранее).
По материалам tutorialzine.com
Перевод — Дмитрий Науменко
P.S. Хотите разобраться с CSS и научиться верстать? Посмотрите еще серию бесплатных видео по резиновой верстке сайта и бесплатный курс по основам адаптивной верстки. Эти материалы помогут вам продвинуться вперед гораздо быстрее:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Позиционирование блоков CSS
Позиционирование блока позволяет размещать элемент в любом месте экрана. С помощью позиционирования блоков веб мастер может создать любой вид сайта.
Схема системы координат:
Позиционирование блоков CSS бывает :
absolute – абсолютным;
relative – относительным;
fixed – фиксированным.
Абсолютное позиционирование в CSS
Абсолютное позиционирование позволяет разместить блок на веб-странице в любом месте экрана. Обозначается абсолютное позиционирование вот так:
position : absolute ;
Абсолютное позиционирование имеет атрибуты:
— top (вверх);
— left (лево);
— right (право);
— bottom (низ).
Координаты задаются от края экрана в px . Достаточно только указывать координаты на два значения (либо на top (вверх) или bottom (низ), либо на left (лево) или right (право)).
Относительное позиционирование в CSS
В относительном позиционировании координаты задаются с первоначального места положения блока, но при всем этом его предвидящее место не освобождается для другого элемента или блока.
Обозначается относительное позиционирование вот так:
position : relative ;
Относительное позиционирование имеет атрибуты:
— top (вверх);
— left (лево);
— right (право);
— bottom (низ).
Координаты задаются от края экрана в px . Достаточно только указывать координаты на два значения (либо на top (вверх) или bottom (низ), либо на left (лево) или right (право)).
Фиксированное позиционирование в CSS
Фиксированное позиционирование позволяет разместить блок на веб-странице в любом месте экрана, так как и абсолютное позиционирование. Разница между фиксированным и абсолютным позиционированием в том, что в фиксированной позиции блок или элемент всегда будет располагаться относительно окна браузера. Если сказать простыми словами, фиксированный элемент зафиксируется на веб-странице и не сдвинется во время прокрутки, то есть, всегда будет виден на экране.
Обозначается фиксированное позиционирование вот так:
Фиксированное позиционирование имеет атрибуты:
— top (вверх);
— left (лево);
— right (право);
— bottom (низ).
Координаты задаются от края экрана в px . Достаточно только указывать координаты на два значения (либо на top (вверх) или bottom (низ), либо на left (лево) или right (право)).
MnogoBlog
как создать сайт на wordpress, настроить и оптимизировать wordpress
CSS позиционирование или основы блочной верстки
Здравствуйте, сегодня поговорим об основах блочной (div) верстки, благодаря данной информации вы сможете располагать блоки (с картинками, анимашками и др.) в любом месте вашего сайта.
Скачать исходники для статьи можно ниже
В данной статье мы рассмотрим свойства CSS, такие как: position:static, position: relative, position:absolute, float и др.
1. position:static
Это статическое позиционирование, оно задается всем элементам на странице по умолчанию, что означает, что элемент не позиционируется и появляется там, где это обычно было бы в документе.
Так как оно идет по умолчанию, то его и не нужно прописывать, если только вы не хотите переопределить позиционирование, которое было установлено ранее.
По умолчанию div блоки располагаются так:
2. position:relative
Это относительное позиционирование, если использовать его, то вы можете переместить элемент вверх, вниз, влево, вправо относительно того места, где бы он появился при статичном позиционировании.
Давайте передвинем DIV-1 вниз на 20 пикселей, и влево на 40 пикселей:
У нас получиться следующее:
Обратите внимание, что на том месте, где бы должен был находится наш блок #div-1, теперь образовалось пустое пространство. Следующий за блоком #div-1, блок #div-after не переместился ниже, потому что, #div-1 по-прежнему занимает свое место в документе, несмотря на то, что мы передвинули его.
3. position:absolute
Это абсолютное позиционирование, при его использовании, элемент удаляется из документа, и появляется там, где вы ему скажете.
Давайте применим абсолютное позиционирование для блока div-1a:
Обратите внимание, что на этот раз, поскольку блок #div-1a был удален из документа, оставшиеся элементы на странице расположились по-другому: #div-1b, #div-1c и #div-after переместились выше, на место удаленного блока. А сам блок #div-1a, расположился точно в правом, верхнему углу страницы.
Таким образом, мы можем позиционировать любой элемент относительно страницы, используя свойство – position: absolute.
В большинстве же случаев, нам нужно позиционировать элемент (div-1a) относительно родительского элемента (div-1), а не всей станицы целиком – и на этом моменте нам поможет относительное позиционирование.
4. position:relative + position:absolute
Если придать блоку div-1 относительное позиционирование, любые элементы внутри него будет позиционироваться по отношению к div-1. Тогда, если для блока div-1a применить абсолютное позиционирование, мы можем переместить его в правый верхний угол блока div-1:
5. Две колонки.
Теперь давайте, используя относительное и абсолютное позиционирование, создадим две колонки внутри блока div-1:
И вот что у нас получилось:
Одним из преимуществ использования абсолютного позиционирования является то, что мы можем позиционировать элементы в любом порядке на странице, независимо от порядка их следования в HTML. Так что, в данном примере, блок div-1b стоит перед div-1а – не правда ли классно!.
А куда же делись остальные элементы из нашего примера (div-after, div-1c)?
Они скрылись под абсолютно расположенными блоками (div-1b, div-1a). К счастью, есть возможность это исправить.
6. Две колонки с абсолютной высотой.
Одним из решений является установить фиксированную высоту на элементах.
Но это не является жизнеспособным решением для большинства конструкций, потому что мы, как правило, не знают, как много текста будет в элементах, или точных размеров шрифта, которые будут использоваться.
Вот что получиться в итоге:
7. Свойство: float (обтекание)
Для колонок с переменной высотой, абсолютное позиционирование не подходит, поэтому давайте рассмотрим другой вариант.
Назначив блоку float, мы максимально возможно оттолкнем его к правому (или левому) краю, а следующий за блоком текст, будет обтекать его. Обычно такой прием используется для картинок, но мы будем использовать его для более сложной задачи, поскольку это единственный инструмент, имеющийся в нашем распоряжении.
8. Колонки со свойством float.
Если назначить первому блоку float: left, а затем второму float: left, каждый из блоков прижмется к левому краю, и мы получим две колонки, с переменной высотой.
В итоге получиться так:
Также, можно назначить колонкам противоположное значение float, в этом случае, они распределятся по краям контейнера.
9. Свойство clear
Если мы хотим, чтобы расположенные после колонок блоки были видны и располагались внизу под колонками, то нам необходимо для блока div-1c применить свойство clear:
И получим следующее:
Теперь колонки располагаются красиво и правильно!
Также данный результат можно получить, если назначить родительскому контейнеру (div-1) свойство overflow: hidden.
10. position: fixed
Это фиксированное позиционирование.
Фиксированное позиционирование (position: fixed), является подразделом абсолютного позиционирования. Единственное его отличие в том, что он всегда находится в видимой области экрана, и не двигается во время прокрутки страницы. В этом отношении, он немного похож на фиксированное фоновое изображение.
Раскладка в CSS: позиционирование
В CSS существует, по большому счету, четыре способа раскладывать боксы по странице: прямой поток, позиционирование, float’ы и таблицы. К сожалению, ни один из них не дает полного набора средств, которыми можно было бы сверстать что-нибудь реальное. Поэтому используются они обычно все вместе, да еще и с изрядной долей хаков для обхода несовместимостей в реализациях стандарта.
В следующих статьях я собираюсь описать все их по порядку, с плюсами, минусами и хаками. А потом сделаю итоговую практическую статью, где покажу, как создается раскладка, приближенная к реальности.
Начну с позиционирования.
Краткий обзор
Суть позиционирования очень проста: любой бокс можно расположить в любом месте страницы, задав ему точные координаты. Именно любой, а не только , как многим кажется; вы легко можете позиционировать хоть , если очень захочется ��
Конечно, если бы все было так просто, то отдельной статьи бы это явно не заслуживало. Сложности начинаются тогда, когда хочется делать растянутые колонки, панельки и прочее. Другими словами — завязывать положение и размеры боксов друг на друга.
Существуют четыре способа позиционирования боксов:
Static
Это способ по умолчанию, можно сказать, отстутствие какого бы то ни было специального позиционирования, а просто выкладывание боксов одного за другим сверху вниз. Этот порядок как раз и есть упомянутый мной . Там, конечно, есть и внутри него тоже всякие сложности, но сейчас я про них говорить не буду.
Absolute
Бокс с абсолютным позиционированием располагается по заданным координатам, а из того места, где он должен был бы быть, он удаляется, и в этом месте сразу начинают раскладываться следующие боксы. Говорят, что он «».
Fixed
Ведет себя так же, как absolute, но при этом он не скролится вместе с остальной страницей.
Relative
Такой бокс можно сдвинуть относительно того места, где он был бы в потоке, но при этом из потока он не исключается, а продолжает занимать там свое место. То есть сдвигается со своего места он только визуально, а положение всех боксов вокруг него никак не меняется.
А теперь — углубимся.
Абсолютное позиционирование
Итак, чтобы расположить бокс абсолютно, ему надо задать нужный тип позиционирования и координаты:
Координаты означают расстояние бокса от краев: top:0 означает, что бокс прижат к верхнему краю, right:10px — что отстоит на 10 пикселов от правого края и т.д. Любая из координат необязательна. В случае, если координаты не задают вертикального или горизонтального положения, то оно остается таким же, какое было бы без позиционирования. То есть в случае, когда у нас есть два произвольных бокса один за другим «box1» и «box2»:
. и второй мы позиционируем так:
. то по вертикали он останется прямо под первым боксов, а по горизонтали будет отстоять от левого края на 150 пикселов.
Стакан
Возможно некоторых особенно въедливых читателей уже какое-то время беспокоит вопрос, который я намеренно опустил в начале: относительно каких таких краев двигают бокс координатные свойства? Вопрос этот не совсем тривиален, потому что хотя интуитивно и кажется, что все позиционируется «от окна», это не всегда так.
Страница начинает раскладываться в своеобразный перевернутый «стакан», начинающийся от верха окна, ограниченный с боков и бесконечно продолжающийся вниз. Если все блоки статические, то они так в этот стакан и раскладываются один за другим. Если в этом потоке появляется позиционированный бокс, то его координаты вычисляются от сторон этого самого стакана.
Но самое интересное, что этот позиционированный бокс сам внутри себя создает такой же стакан, и все его дети (боксы, находящиеся у него внутри) позиционируются уже относительно него, а не относительно окна. И внутри него происходит то же самое: любой позиционированный (не static) бокс создает внутри себя такой стакан.
Используя более принятые в CSS термины, этот стакан называется «» (containing block).
Fixed
Бокс с position:fixed — это, в общем-то, разновидность того же абсолютного позиционирования. Единственная разница заключается в том, что при скролировании окна эти боксы остаются на месте. Этот эффект широко используется на страницах веб-приложений для всяческих прилипающих блоков меню и тулбаров, которые как раз и должны себя так вести.
С fixed-боксами связан один среднеинтересный момент. Для обычных абсолютных боксов браузер всегда сделает достаточно скроллбаров, чтобы их можно было просмотреть. А вот если фиксированный бокс не влезет в окно, то доскролиться до него будет уже нельзя.
Автоматические размеры
У абсолютного позиционирования есть крайне полезное свойство: им можно задавать размеры боксы по их внешним границам. Раньше я рассказывал о том, что если задавать размеры свойствами width и height, то отступы, рамки и границы добавляются к ним. Это неудобно, когда надо вместить бокс со всеми окружающими его красивостями в дырку точно известного размера. При абсолютном позиционировании эта проблема решается указанием координат противоположных сторон одновременно:
Этот бокс с заданными левой и правой координатами будет точно касаться боковых сторон своего стака. э-э-э. содержащего блока, какой бы ширины тот ни был, а margin’ы и padding’и будут откладываться внутрь бокса.
Это свойство неоценимо при создании раскладок веб-приложений, где неперекрывающиеся боксы должны занимать весь экран по определенной сетке:
Засада
Абсолютное позиционирование — действительно мощный механизм раскладки, но универсальным средством он, все же, не является.
Главная проблема состоит в том, что координаты и размеры бокса можно задать только относительно содержащего блока, в котором он лежит. А очень часто хочется другого.
Простейший пример — абсолютным позиционированием нельзя сделать самую традиционную раскладку: заголовок, содержимое любой высоты в несколько колонок и нижний блок. Обычно получается такое:
Здесь видны две проблемы:
Колонки не получается выровнять по высоте, потому что колонки друг в друге не лежат, и в CSS нет средств сказать «высота как вот у того другого бокса».
Нижний блок проваливается за колонки, потому что они изымаются из потока, и нижний блок по высоте не толкают. И его нельзя абсолютно позиционировать под самой высокой колонкой, потому что в CSS нет средств сказать «верх под тем другим боксом».
Относительное позиционирование
Относительное позиционирование — странная штука. Если судить по картинке выше, то оно похоже на абсолютное, но к нему зачем-то добавляется странный эффект: бокс продолжает занимать место в потоке. Действительно, именно для позиционирования боксов этот метод используется редко. Хотя изредка и бывают ситуации, когда надо ради визуальных эффектов пододвинуть один бокс под другой.
Чаще же всего position:relative используют вообще без задания смещений. В этом случае он ведет себя как обычный статический бокс, но поскольку он все таки не статический, то он создает внутри себя содержащий блок, тот самый, относительно которого будут позиционироваться боксы внутри него.
Вот пример, который показывает полезность этого свойства. Пусть у нас есть три блока: «заголовок», «содержимое» и «низ», а внутри «содержимого» лежит блок «об авторе»:
И пусть высота заголовка нам точно не известна. Боксы эти статические, идут один за другим, и какая бы высота у заголовка ни была, содержимое будет начинаться прямо под ним.
А теперь нам хочется внутри содержимого блочок об авторе расположить так, чтобы он был точно в правом верхнем углу содержимого.
Но этого недостаточно, так как содержащим блоком для него сейчас является все окно, и блок об авторе уедет поверх заголовка. Точно поставить ему расстояние от верха тоже нельзя, потому что размер заголовка у нас может быть разный. Следующая мысль — сделать блок содержимого тоже абсолютным, тогда он станет содержащим блоком. Но тогда он сам выдернется из потока и низ прижмется прямо к заголовку.
Вот это и есть случай, в котором работает position:relative . Если мы поставим его блоку содержимого, то он никуда не денется из потока, но в то же время станет содержащим блоком, и «об авторе» расположится в его правом верхнем углу.
Реальное положение вещей
Реальность, как обычно, накладывает на разработчика еще большие ограничения, чем сама технология в чистом виде. Самую большую проблему представляет Internet Explorer для Windows, поддержка CSS в котором не обновлялась уже 4 года. Вообще, у него багов, связанных с CSS’ом довольно много, и все они подробно описаны на страницах интернета. Для исчерпывающего списка советую покопаться в «css-discuss wiki» и в «Position is everything». Я же остановлюсь на двух особенно заметных проблемах.
Атоматические размеры
В WinIE не работает задание размеров боксов через одновременную установку координат противоположных сторон. Это, однако, довольно легко обходится использованием интересной способности IE рассчитывать значения свойства для CSS с помощью Javascript. Возьмем тот же пример с боксом во всю ширину и margin’ами и padding’ами по 20 пикселов:
Код для этого выглядит так:
Здесь IE просто проигнорирует right:0 и бокс останется у левого края, обтягивая свое содержимое:
Чтобы такого не было, ему надо задать какую-то конкретную ширину. Но поскольку указать ее точной цифрой мы не можем, так как неизвестно, какая ширина будет у родительского бокса, то мы заставим IE высчитывать эту ширину:
document.body.offsetWidth — это текущая ширина бокса страницы. А число 82 — это margin’ы+padding’и+border’ы с двух сторон бокса.
Если нужно взять ширину не «body», а какого-то произвольного бокса, то ему надо дать id (пусть будет «mainbox») и тогда его ширина будет браться так: mainbox.offsetWidth .
Fixed
В WinIE не работает position:fixed . Это очень неприятно, потому что не только пропадает эффект прилипания (что было бы еще ничего), но бокс еще и не позиционируется совсем. А это, понятное дело, обычно полностью рушит всю раскладку.
Существует способ сымитировать поведение фиксированного позиционирования (чтобы бокс не скролился) с помощью абсолютного. Возьмем такую структуру:
Мы хотим, чтобы блок меню висел фиксировано в каком-нибудь месте, а содержимое бы свободно скролилось в окне. Если поставиь для меню position:absolute , то оно будет скролиться вместе с окном, потому что оно лежит внутри скролящегося окна. Гениальный же хак заключается в том, чтобы заставить скролиться не окно, а только бокс содержимого:
В деталях это означает следующее. Поведение элемента «html» во многом отвечает за поведение окна (так уж сложилось). Мы говорим ему занять все окно целиком и отключаем скроллинг ( overflow:hidden ). Зато элементу «body» говорим по размеру занять, опять-таки, все окно, а скроллинг включаем ( overflow:auto ). И теперь абсолютно подвешенный бокс «menu» не двигается, потому что скролится не его содержащий блок «html», а совсем другой — «body».
Все это выглядит слегка наворочено, но со временем должно стать более понятным. В общем-то, это довольно глубокая магия, и на начальных этапах обычно не требуется :-).
Заключение
Позиционирование обладает своими плюсами и минусами.
Самый большой минус — это невозможность завязать размеры и положение произвольных боксов друг на друга, что вынуждает использовать только жестко заданные размеры боксов.
Самым большим плюсом является полная независимость визуального расположения от порядка элементов в HTML. Это позволяет кардинально менять основную сетку раскладки страницы с минимальными усилиями.
Эта статья — часть находящегося в процессе написания цикла под рабочим названием «Учебник». Я рекомендую ознакомиться и с другими статьями, которые можно найти в категории «Учебник», где они сейчас собраны в обратном хронологическом порядке.
Комментарии: 76
Мнение:
Вольный перевод спецификации.
Цитата:
. ему надо задать какую-то конкретную ширину. Но поскольку указать ее точной цифрой мы не можем, так как неизвестно, какая ширина будет у родительского бокса, то мы заставим IE высчитывать эту ширину.
Замечание:
Разве задав ширину дочернего блока 100%, мы не получим желаемого?
Нет, 100% не сработает. Я специально выбрал пример так, чтобы там были margin’ы, border’ы и padding’и. Они добавляются к ширине, поэтому если сказать в том примере width:100% , то бокс будет занимать 100%+82 пиксела и, соответственно, не уместится в контейнер.
В примере кода, в тексте после заголовка «Fixed в IE» у вас написано:
body
Я может чего путаю, но помоему это опечатка. Должно быть width:100%
Спасибо за статью, сколько рылся, подобного простого объяснения мало где встречал. Узнал новое.
Хорошая статья, но извините, хочу придраться вот к этому:
«В CSS существует, по большому счету, четыре способа раскладывать боксы по странице: прямой поток, позиционирование, float’ы и таблицы.»
Это высказвание неверно с точки зрения спецификации и идеологии CSS.
Взглянув сюда:
не могу не заметить следующее:
Самое грубая ошибка по поводу таблиц. Таблицы не являются способом «раскладывать боксы в CSS». Ключевое слово «в CSS». Вся иделогия позиционирования элементов в CSS состоит в том чтобы НЕ использовать логических элементов для визуальной презентации. Таблица — это логическая структура. Да, она имеет вполне определённое отображение, но это не метод CSS для позиционирования. Это дурное наследие дней раннего HTML. Структура это то же самое, что и (или любой другой «block») в глазах CSS. Точно так же вы сделаете ошибку, если будете использовать таг для придания жирности шрифту, вместо того, чтобы использовать свойство font-weight:bold. Чтобы исправить неточность в Вашем тексте, предлагаю заменить CSS на HTML, ибо, действительно, для многих несведущих о разделении контента и его презентации, таблицыпо сей день остаются главным способом позиционирования элементов на странице.
Вторая неточность в формулировке, это то, что Вы ставите прямой поток, позиционирование и float’ы наравных в своём списке. Прямой поток и плавающие блоки это подвиды CSS позиционирования, которых, согласно ссылке выше всего 3:
1) normal (включающее static block/inline, relative block/inline и run-in).
2) floats
3) absolute (включающее, собственно, absolute и fixed)
Не говорится ни слова о media (screen/printer/etc.) так как одни и те же CSS свойства и элементы отображаются по разному на разных носителях.
Учитывая всё это, вводная фраза должна быть приблизительно такой:
В верстке web страниц существует два основных подхода к позиционированию элементов: использование самих HTML элементов (таких как таблицы, параграфы, нумерованные списки и т.д.) и CSS позиционирование, в котором внешний вид элементов логически отделён от наполняющего контента. В CSS существует, по большому счету 3 способа раскладывать боксы по странице: прямой поток (включающий static и relative блоки), float’ы (плавающие элементы) и абсолютное позиционирование (включающее методы absolute и fixed).
Вобщем я делал так. Дочерний блок имеет padding и border. Родительский блок имеет padding вместо margin-а у дочернего блока. Ширина не задаётся явно. Во всех броузерах работает одинаково корректно. Вот код:
В моём примере ширина родительского блока может быть произвольной, дочерний займёт её всю. Позиционироваться родительский блок также может произвольно, положение дочернего блока относительно него не изменится, но при этом желательно указывать ширину родительского блока явно.
упс. код не видно 8) но думаю и так понятно
Ага. Тут требуется разъяснение ��
Дело в том, что эта статья — продолжение цикла (надо будет это явно где-то указать). И в первой статье цикла я как раз рассказывал про подходы к верстке HTML. В этой конкретной статье я рассказываю именно о способах раскладки элементов страницы CSS’ом.
То, что вы называете позиционированием, я называю раскладкой: то есть общий набор всех инструментов что-то располагать на экране. Позиционирование — одно из них, то, которое делается через свойство «position». Именно из-за созвучия.
Среди других способов я упомянул таблицы отчасти в виде провокации, для поддержания интереса :-). Я имею в виду не HTML’ный , а значения для свойства display: table, table-row, table-cell и остальные table*. Это здесь: http://www.w3.org/TR/CSS21/tables.html#q2
Моя основная задача, все же, не перевести спецификацию (переводы-то есть), а написать доходчивый учебник для начинающих, поэтому я сознательно опускаю многие тонкости. Например, run-in, inline-block и inline-table я вряд ли буду рассматривать вообще, потому что они почти нигде не реализованы (только в 8-й Опере, кажется, появился вменяемый inline-block). То же касается и различных media. Я о них буду писать, но гораздо-гораздо позже. Потому что если это все загрузить в начинающего, он меня больше читать не будет :-).
GVA, если я правильно угадал, что вы имели в виду, то вы используете два бокса: контейнер, который позиционируется, и его ребенок, который статический. Родителю ставятся нужные размеры, а у статического ребенка ширина подбирается автоматически, и он со всеми margin’ами-padding’ами влезает в родителя тютелька в тютельку. Так?
Этот подход я где-то встречал под названием ‘layout boxes’. Его минус как раз в том, что исключительно для оформительских целей CSS’а в HTML приходится добавлять лишний структурный элемент (контейнер), который для документа не несет никакой смысловой нагрузки. Да, иногда такие хаки использовать приходится, но CSSники справедливо считают что хак, который вынуждает менять HTML — это самый плохой вид хака. Это приводит к более загруженному HTML-коду, от которого мы, в общем-то, и хотели отказаться с помощью CSS’а. Поэтому я и порекомендовал в статье expression’ы.
Ясно.
Но даже при таком понимании «раскладывания», CSS позиционирование и таблицы (а тем более CSS таблицы) не могут быть равнозначными способами расположения элементов (с точки зрения CSS!) и стоять в одном ряду.
«display: » — это не «position:» и, заодно, «display:table» — это уже не «display:block.
Можно говорить о раскладке боксов и можно говорить о форматировании элементов таблиц при помощи CSS, но ставить обе темы в один ряд, мне кажется, всё же, неправильно. Таблица, хоть даже и CSS таблица, — это бокс. А значит, вы говорите о раскладывании боксов боксами. А это не есть правильно. Всё равно как сказать: боксы можно раскладывать позиционированием, флоатами и списками.
Таблицы, как и, например, нумерованные/авто-генерируемые списки это особый вид контента, у которого есть дополнительные визуальные свойства (в том числе и CSS), в отличие от обычных боксов. Это отдельная тема, которая к раскладыванию(!) элементов при помощи CSS(!) имеет весьма далёкое отношение. Не спроста в спецификации CSS таблицы (как и списки) выделены в совершенно отдельную (от позиционирования) главу.
Дело в том, что display:table — это не форматирование элементов таблиц. Это именно способ раскладки, не больше, не меньше. Их можно применять (и применяют) к любым элементам для достижения визуального эффекта «как бы табличной» раскладки. Короткий пример, как с помощью таблиц CSS делается колоночная раскладка:
Собственно, как вы и пишете — это отдельная вещь. И я в начале написал, что буду писать их по порядку, а начну с позиционирования. Так что, я предлагаю пока просто подождать, пока оно все будет написано, а потом уже там и спорить по сути ��
И еще нашел интересную штуку. Такой код:
выдает в IE 6.0 рамку, растянутую на всю ширину страницы.
Код, который я привел работает, если перевести IE в стандартный режим, написав в первой строке файла «». Плюс я забыл точку с запятой после height:100%, уже поправил, спасибо.
А ваш код выдает div по всей ширине именно потому, что IE игнорирует position:fixed и оставляет бокс статическим, он себя и ведет как статический: занимая всю ширину. Можно попробовать убрать position:fixed, ничего не изменится.
Господа, мне вот что интересно. Как можно например сделать такие декоративные элементы, как например закругленные углы у блока, не тронув структуру документа? По-моему никак. И это грустно.
Добавлять нужные структурные элементы скриптом. Это более чистый метод, потому что исходный документ, который получают поисковики, не содержит этого мусора.
Использовать XBL. Это есть только в Gecko-браузерах: возможность в стилях привязывать к элементу любую структурную обвязку и скриптовать ее.
Использовать HTC. Это есть только в IE. По назначению похоже на XBL, но говорят, что менее удобно.
Ну и самый правильный вариант — подождать широкой реализации CSS3. Закругленные углы там есть, а также можно вешать любое количество фоновых картинок и назначать картинки для рамок: CSS3 Backgrounds and Borders Module
Александр, Troy как раз спрашивал, как избежать таких «решений» ��
Ой блин =))) . ну да ладно — кому-нибудь до пригодиться =))
за http://pro.html.it/esempio/nifty/
Александру спасибо. Javascript’ом я думаю и буду отныне пользоваться. XBL и HTC тыкать, если честно, никакого желания нет ��
Иван Сагалаев, спасибо Вам! Отличная статья! Отличная главным образом от других тем, что понятна простому человеку не умудренному технической терминологией. К сожалению, пока еще очень мало хорошей литературы по «продвинутому» CSS на русском языке, и Ваши статьи очень помогают. Я новичок в CSS, но уже полностью отказываюсь от табличной верстки. Мне самому пришлось перерыть кучу информации пока строил «резиновый» шаблон трех-колончатого сайта (посмотреть можно здесь), но мне так и не удалось избавиться от лишних обрамляющих контейнеров и некоторых ошибок (например, наполнение основного контента в середине должно всегда быть больше, чем по бокам, иначе дизайн портится)
Хотелось бы узнать, где еще можно почитать на русском про позиционирование, блоки, рамки, возможности и т.д. CSS? Поделитесь ссылками!
А от себя делюсь этой, очень занимательной ссылкой — кстати, было бы отлично, если кто-то перевел все это на русский..
Throy: посмотри также и это. Рекомендую всем!
[. ] Раскладка в CSS: позиционирование. Хорошая статья про способы позиционирования блоков HTML-документа с помощью CSS. Написана удивительно грамотно и хорошо иллюстрирована. Такое редко встречается среди русскоязычных статей по этой теме. В CSS существует, по большому счету, четыре способа раскладывать боксы по странице: прямой поток, позиционирование, float’ы и таблицы. К сожалению, ни один из них не дает полного набора средств, которыми можно было бы сверстать что-нибудь реальное. Поэтому используются они обычно все вместе, да еще и с изрядной долей хаков для обхода несовместимостей в реализациях стандарта. [. ]
[. ] Link: Раскладка в CSS: позиционирование [. ]
position: fixed
Спасибо за гениальный код… ��
вообще, fixed можно реализовать и через top:expression();, но у вас — гораздо элегантнее…
Однако такой вопрос — сия конструкция не хочет работать в опере — так и задумано? Конечно, это элементарно обходится через * > #menu
но всё-же…
Код, может, и гениальный, но не мой :-). Это первое или второе, что попалось в Google. Мне было важно сам принцип показать: что просто позиционирующийся бокс выносится за тот элемент, который скролится.
В Опере не проверял. Однако, мне написали, что я нашел не совсем корректный способ, есть более общий, который должен работать везде: http://tagsoup.com/-dev/null-/css/fixed/
Молодец Иван! Написал нормальную статью с понятными фразами и красивыми картинками. Я думала таких людей уже не осталась : теперь пишут либо ради seo текста, либо вода для рассылки, либо просто ламеры.
Нужная и полезная статья.
Спасибо за статью. Последний пример долго мучал в ие6, пока не прочел комменты. Пойду изучать «стандартный режим» и стркты от в3ц. Еще раз спасибо.
У меня появился такой вопрос, начал делать всплывающую менюшку с помощью CSS, делаю все из списков ul li. Получилось так, что всплывающая часть попадает на основной контент, и получается так, что перекрывается несколько блоков, при этом, всплывающий блок, стал полупрозрачным и под ним виден основной контент. Выглядит это ужасно! Возможно ли сделать так, что бы всплывающая часть была не прозрачной и перекрывала другой блок полностью? Извините, если вопрос глупый, я еще новичок в этом деле. Если я что то не корректно объяснил, могу дать дополнительную информацию.
Исправил меню для Firefox, сделал фон белым цветом и задал параметр z-index, теперь все корректно отображается, но только в Firefox, в IE по прежнему та же проблема, весь всплывающий блок прозрачен и накладывается на основной контент. Не подскажите, возможно ли каким либо способом решить данную проблему?
Спасибо, все исправил, теперь работает и в IE и в Firefox`е, поставил значение z-index у контента «-256» и все сразу заработало. ��
Интересно, а как из php программы можно узнавать на сервере каким браузером пользуется посетитель сайта и версию браузера. В зависимости от этого хотелось бы выдавать либо вэб страницу, которая использует слои, а если версия браузера стара, то давать ему табличный вид.
Это можно узнать из переменной окружения ‘HTTP_USER_AGENT’. Синтаксиса PHP прямо так не подскажу, но это должно быть просто.
Но этого не надо никогда делать :-). Причины просты:
- Это никогда не будет надежно работать, потому что эту строку браузер не обязан сообщать честно (и это нередко так и происходит) и кроме того, браузеры все время появляются новые.
- Делать отдельную табличную версию страницы нет никакого смысла, потому что она поможет пригодиться только совсем устаревшим браузерам.
- Если же табличная версия уже есть, то делать дополнительную CSS’ную версию страницы тоже нет никакого смысла. Плюсы CSS’а в том, что он позволяет отказаться от проблем, связанных с таблицами, поэтому оставляя еще и табличнцю версию вместе с CSS’ной вы только увеличиваете себе работу вместо уменьшения. Кроме того, современные браузеры прекрасно понимают таблицы. Если у вас есть много табличного HTML’а, используйте его.
P.S. Кстати, не называйте, пожалуйста, раскладку CSS’ом «слоями». Слово «слой» придумали в Netscape, ккогда и CSS-то был еще в совсем зачаточном состоянии, и, строго говоря, CSS со «слоями» никак не связан.
Существует способ заставить HTC работать в Firefox’e:
http://dean.edwards.name/moz-behaviors/
Закруглённые углы боксам можно сделать, но только в Firefox:
-\moz-border-radius: 5px;
Иван Сагалаев:
В Опере не проверял. Однако, мне написали, что я нашел не совсем корректный способ, есть более общий, который должен работать везде: http://tagsoup.com/-dev/null-/css/fixed/
Вот, еще вариант для фиксированного блока.
Используется метод Целика, который учитывает баги ИЕ
Проверял в Опере, ИЕ,Firefoks’e
Спасибо.
Я начинающий и мне Ваша статья помогла наглядно разобраться в позиционировании блоков.
«пропоадает». исправьте, пожалуйста.
что касается контента — очень нравится
я так понял, что expression работает только в IE, тогда можно использовать, например, expression(this.parentNode.offsetHeight — 41), что удобнее когда id неприменим
[. ] Третья лекция: Раскладка в CSS: позиционирование, Иван Сагалаев [. ]
Мне кажется, или в Firefox 1.5 оно не работает?
это хороший способ, но он работает только в IE
есть ли что-нибудь подобное, чтобы работаор в Opera и Mozilla FireFox.
А почему эта страничка корректно работает только в Опере?? Что можно сделать или дописать, чтоб и в эксплорере все работало?
http://csszengarden.com/?cssfile=http://www.timpelen.com/extra/zen/zengarden.css
подскажите как работают top, left, right, bottom?
Чем их использование отличается от margine-top, margine-left.
Почему если в следующем коде подставить — position:absolute, position:relative или совсем без
position, получаятся разный результат?
top:100px; left:20px; right:100px;
height:1000px;
border:solid blue 1px;
>
[. ] В этой таблице стилей нет ничего удивительного. С помощью float’а выстраиваем все поля в строку. Задаём обволакивающим блокам относительное позиционирование для того, чтобы абсолютно позиционировать подсказки именно относительно них (подробнее о позиционировании на русском можно почитать в блоге Ивана Салагаева). [. ]
Иван, спасибо Вам большое за такую прекрасную статью. Прошло уже довольно много времени с момента ее написания, но я могу точно констатировать, что для многих она является актуальной и на сегодняшний день.
Добрый день, Иван!
Вы приводите пример
html code(
Этот пример не работает в IE. Подскажите, пожалуйста, как с этим справиться. И еще. Хотелось бы больше узнать о «как бы табличной раскладке».
Заранее спасибо!
С этим невозможно справиться, потому что IE (включая последний 7) просто не поддерживает display: table*. Поэтому эту раскладку сейчас рассматривать довольно непрактично.
Про «побольше узнать», к сожалению, тоже не подскажу. Каких-то объясняющих статей не встречал, поэтому могу посоветовать только почитать саму рекомендацию CSS, суть там вполне понятна.
Спасибо Александру (комент 1236) за решение с отображением фиксированных блоков в FireFox!
А то не знала что и думать ��
И спасибо за прекрасную статью Ивану!
Очень интересная и поучительная статья про эмуляцию FIXED в IE6. Однако, как я понял, при таком раскладе, фиксированный блок будет находиться всегда впереди, а что если я захочу, чтобы содержимое, содержащее к тому же другие нефиксированные блоки, скроллилось поверх него? С нормальным FIXED это можно реализовать, а как быть с «нашим любимым» IE6?
Ух. Тут нужно действительно долго разбираться!
Спасибо за статью! Очень помогла.
И к всему этому очень доступно написано.
Отличная статья! Хоть что-то понял в позиционировании -)
Буду продолжать читать.
Вопрос такой:
Почему при position: absolute; у «contents» текст в «contents» не обтекает бокс «author» . а ложиться под него . Даже при наличии у бокса «author» float: right ! ��
Sergey, а он и не будет обтекать =)
только если задать у блока контентс padding-right или padding-left, в зависимости от того, где находится блок автор, но тогда отступ будет по всему блоку контента =)
Чисто на уровне теории, у меня возникает мысль вставить в текст в блоке контента картинку шириной и высотой равную блоку автор, с флоат right =) НО это чисто теория , которую я не проверял и не хочу =)
[. ] В спецификации такого не написано. Точка отсчета у абсолютно позиционированных элементов находится в ближайшем «содержащем блоке» или, как я его называю, «стакане». [. ]
Понравилось то, что автор описал все способы «раскладок»:
CSS существует, по большому счету, четыре способа раскладывать боксы по странице: прямой поток, позиционирование, float’ы и таблицы.
Многим другим статьям не хватает именно этого Я считая ю, что новичку нужно дать сначала общее представление и желательно простыми словами, что и присутствует в данной статье.
А не понравился абзац «стакан». Я все никак не мог представить как один стакан можно засунуть в другой. Просто трудно для понимания. Можешь стоило употребить темрин «Матрешки»?
Самое же главное, что я хотел сказать, это — Спасибо. Три дня мытарств по интернету и эта статья стали прояснять мои представления о верстке.
position:absolute;
top:0; left:0; right:0;
margin:20px; padding:20px;
border:solid red 1px;
width:expression(document.body.offsetWidth-82);
>
Я так понимаю width будет просчитываться только один раз, при загрузке страницы. Когда начинаешь менять размер окна — раскладка корячится. Приходится обновлять страницу.
Подскажите, можно ли это обойти?
NoName, это возможно обойти через: переназначение стиля средствами javascript либо javascript на рефреш страницы при ресайзе автоматически либо автоматический ресайзинг окна на весь экран (не хромлес) до полной подгрузки контента (при инициации так сказать)
Что-то тут не так:
в разделе «ОТНОСИТЕЛЬНОЕ ПОЗИЦИОНИРОВАНИЕ» приводите код:
Разве не relative вы тут хотели сказать?
Нет, в коде все верно. Это иллюстрация того, что absolute позиционируется относительно ближайшего «стакана», который задается через relative .
заметил очень интересную особенность, вот вы уважаемый автор говорили что просто если указать при абсолютном позиционировании и left и right то ИЕ6 right проигнорит, так я ххочу сказать более того что если bottom написать, то он работать не будет, нигде!
То есть указывать все и края нет смысла :-)))
Это от того, что низ страницы как раз зависит от того, что в ней лежит, он не находится внизу окна браузера. Если вы взяли этот блок и вытащили из потока ( position: absolute ), то в потоке страницы не остаётся ничего, её высота — 0. И поэтому bottom :100px не работает, как ожидается.
Полагаю, тут уже речь на самые разные темы, поэтому уточню, что мой комментарий именно к статье (к топику).
потому что в CSS нет средств сказать «верх под тем другим боксом».
Есть некоторая радость по этому поводу, поскольку открываются новые возможности, которые я открыл для себя в jQuery (jquery.com — думаю, также легко понятен новичкам будет, тем более уже много подобных статей на русском языке есть).
Итак, можно вычислять смещения простыми арифметическими действиями. Пример (навороченный слегка, чтобы показать разом всё):
где значения ширины одного из блоков (например, это может быть DIV) можно присвоить переменной, а затем использовать её для указания значений ширины и/или смещения другого блока, более того, можно обойтись без переменной — $(«#huge»).width(), где $ — это относится к jQuery, #huge — id блока, .width() — стандартная функция, которая возвращает ширину указанного блока. (window).height() — возвращает высоту экрана (видимой области интернет-странички вашего сайта). (подробнее на сайте: http://aquanet.nm.ru/aquasite/_mostwantedcoding/mostwantedcoding.html#7
пример такой работы на указанном слева от этого сообщения сайте)
P.S. Представлял себе «стакан», да ещё и перевернутый зачем-то, в разных ракурсах (опрокинутый набок, поставленный сверх на голову и др.), так и не понял, откуда у Вас такие ассоциации, Иван. Нарисуйте лучше картинку jpeg, чтоб можно было посмотреть на вид этого стакана и понять суть, которую Вы хотели донести. Я серьезно ;/
P.S.S.
Если всё делать в общем потоке (static) или какв разделе «Относительное позиционирование», то не получится как это изображено на картинке в ом же разделе. И в IE и в Mozilla нижний блок будет «заезжать» за нижнюю границу экрана, что вызовет появление нежелательной полосы прокрутки. Что можно с этим сделать?
Вроде суть стаканов уловил, но прикрепить изображение к самому низу страницы не удаётся, опять же из-за того, что все стаканы по разному наполнены. bottom крепит к низу окна браузера, что негодится. Смотрю в сентябре этот вопрос обсуждали, но он так и остался открытым. Иван, подскажите пожалуйста, как позиционировать блок от низа?
Очень полезная статья, спасибо автору. Пока я её не прочитал не знал, про растягивание абсолютно позиционированного блока при обнулении противоположных свойств, это очень помогло. Пойду прочитаю весь учебник ��
«Низ страницы» — не самое определённое понятие. Я как-то один практический пример приводил на форуме у себя: http://softwaremaniacs.org/forum/web/348/
Спасибо за статью! Было интересно почитать и узнать больше о позиционировании блоков)
Спасибо за «FIXED». Я Почему-то его прозевал в туторах по ДИВу и для фиксирования пользовался страшными костылями. А тут вдруг откровение года через полтора. :)))
Огромное, хоть и запоздалое, спасибо! Ваши статьи и сейчас будут полезны как новичку, так и бывалому веб-разработчику! Читая эту статью возник вопрос по поводу данного примера http://softwaremaniacs.org/blog/2005/07/08/css-boxes/#hundred-percent Понятно, почему появляется горизонтальная полоса прокрутки, но не понимаю, почему блок h1 прижимается к правому краю? Куда делся правый margin? Кстати, в IE 6-7 он есть!
Очепятка в заголовке: А_томатические размеры
.. статья отличная, очень вовремя попалась и сэкономила массу времени и нервов:) Давно я версткой не занимался.
Иван, очень хотелось бы уточнить — есть ли способ определять расстояние верха дива, находящегося в потоке, от верха экрана (вернее, видимой области сайта), даже если эти дивы сами лежат в некоем родительском общем диве? Иначе говоря, top указывает на расстояние от верха дива до верха родителя, а мне нужно получить — от верха дива до верха документа, сайта.
Нет, 100% не сработает. Я специально выбрал пример так, чтобы там были margin’ы, border’ы и padding’и. Они добавляются к ширине, поэтому если сказать в том примере width:100%, то бокс будет занимать 100%+82 пиксела и, соответственно, не уместится в контейнер.
используем свойство box-sizing
Иван, спасибо за потрясающие статьи! ��
Хочу заметить, что для поведения с position: relative, которое Вы описали:
. оно похоже на абсолютное, но к нему зачем-то добавляется странный эффект: бокс продолжает занимать место в потоке. Действительно, именно для позиционирования боксов этот метод используется редко.
есть достаточно интересный приём вёрстки, который позволяет избавиться от этой его особенности: можно внутрь элемента, для которого задан position: relative, вставить ещё один блок, у которого установить свойство position: absolute, не задавая для него никаких позиционирующих свойств. После этого становится возможно, устанавливая относительные координаты смещения верхнего из этих блоков, смещать блок относительно того места, где он был бы при статическом позиционировании. Таким образом, можно позиционировать блок относительно его естественного местоположения на странице, где он окажется в результате размещения контента.
Из недостатков этого подхода следует отметить, что в общем случае приходится дублировать div`ы (один вложен в другой), что не очень красиво, но иногда, в частных случаях, бывает можно обойтись без этого — например, для относительно-позиционируемых картинок:
«Чаще же всего position:relative используют вообще без задания смещений. В этом случае он ведет себя как обычный статический бокс, но поскольку он все таки не статический, то он создает внутри себя содержащий блок, тот самый, относительно которого будут позиционироваться боксы внутри него.» Значит ли это, что блок с position:relative создаёт собственный контекст форматирования? Такой же как при float:left, float:right, position:absolute, display:inline-block, display:inline-table, display:table-cell, display:table, overflow:auto, overflow:scroll, overflow:hidden.
Немного остолбенел, прочитав: «существует, по большому счету, четыре способа раскладывать боксы по странице: прямой поток, позиционирование, float’ы и таблицы. «. Первая мысль — а как же флекс? грид? Облегчение пришло, когда увидел дату написания статьи — 2005 год)))
Похожие публикации:
- Как растянуть background css
- Как растянуть меню на всю ширину css
- Как с помощью css задать красный цвет текста для элемента
- Как сдвинуть border css
Не получается передвинуть элемент
У меня есть в папке layouts/application.html.erb такой код (я использую devise):
И в stylesheets/custom.css.scss такой код относительно этого id :
sign-up-link
У меня есть контейнер и весь этот css и ruby код относятся к нему. Проблема заключается в том, что я могу двигать ссылку «Регистрация» влево-вправо, но не могу вверх-вниз. Не могу понять, с чем это связано. Может как-то не так двигаю. Помогите пожалуйста, так же хотелось бы услышать какой-нибудь совет насчёт позиционирования элементов на веб-странице. Мне кажется, что так выставлять по пикселям не лучший вариант. Я хочу «Регистрация» сделать на одном уровне с кнопкой «Войти». Вот скриншот:
Отслеживать
33.9k 25 25 золотых знаков 130 130 серебряных знаков 222 222 бронзовых знака