Главная
Интернет
Позиции в css. Позиционирование CSS. Из чего выбрать или методы

Позиции в css. Позиционирование CSS. Из чего выбрать или методы

Представьте себе, что веб-разработчику совсем не нужно думать о том, как будет выглядеть визуально готовая страница. Он просто пишет код, элементы сами выстраиваются на странице, сверху вниз (блочные) и слева направо (строчные). Чем выше по документу написан код, тем выше он будет отображаться на странице.

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

В CSS стилях это называется позиционированием (position) , которое может быть обычным (static) , относительным (relative) и абсолютным (absolute) .

Относительное позиционирование в CSS

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

Position: relative;

ничего не произойдет, он останется на месте. А перемещает блок система координат (top, bottom, left, right) , как с положительными, так и отрицательными значениями.

Как это работает?

Внутри желтого блока с классом block-yellow находится красный блок с классом block-relative . В обычном потоке, красный блок перекрывает желтый, так как он в коде прописан последним.

исходная позиция
относительная позиция- relative

Нам надо сдвинуть красный блок вниз на 10 пикселей. Сделать это можно, только насильственно поменяв позицию красного блока. Мы так и пишем top: 10px , но надо указать, от чего отсчитывать эти 10 пикселей?

Прописав position: relative , мы ясно даем понять, что отсчитывать относительно его текущего положения.

Block-yellow {
background-color: #ffe70f;
}

Block-relative {
position: relative;
top: 10px;
background-color: #ed5b77;
}

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

Если убрать из кода position: relative , то блок останется на месте. А если вместо relative , написать absolute , то по умолчанию отсчет этих 10 пикселей будет вестись от края окна браузера и в итоге наш блок наоборот поднимется вверх, подтягиваясь к нижней кромке браузера. А это в наши планы не входило.

Абсолютное позиционирование в CSS

На картинке блок позиционирован абсолютно , это когда отсчет системы координат ведется от края браузера, заменив всего одно слово, мы поменяли положение блока.

Position: absolute;

Есть одна особенность. Абсолютное позиционирование оказывает влияние и на строчные элементы. Если строчному элементу задать position: absolute , то он станет вести себя как блочный. Это аналог свойству - display: block .

Это ещё не всё, "абсолютный" элемент, находящийся внутри "относительного" родителя, меняет свою точку отсчета координат и начинает позиционироваться от родителя.


position: relative

position: absolute;

Блок с классом block-absolute находиться внутри родителя block-yellow .

Block-yellow {
position: relative;
padding: 10px;
background-color: #ffe70f;
}

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

Block-absolute {
position: absolute;
bottom: 10px;
left: 10px;
background-color: #ed5b77;
}

Фиксированное позиционирование

При прокручивании страницы блок с position: fixed , будет оставаться на месте, обычно такой метод применяют для закрепления навигационной панели.

z-index

Разруливает порядок перекрытия "абсолютных" блоков. Нам надо, чтобы красный блок был сверху желтого, тогда мы указываем z-index: 2 для красного и z-index: 1 для желтого.

Красный
Желтый

Block-red {
position: relative;
z-index: 2;
background-color: #ffe70f;
}

Block-yelow {
position: absolute;
top: 20px;
z-index: 1;
background-color: #ed5b77;
}

18.02.15 21.5K

Если разрезать любой сайт, созданный на основе html , то перед вами предстанет некая послойная структура. Причем своим внешним видом она будет схожа со слоеным пирогом. Если вам так кажется, то вероятнее всего вы давно не ели. Поэтому сначала утолите свой голод, а затем мы поведаем вам о том, как расположить слой div по центру вашего сайта:

Преимущества верстки с помощью тега

Существует два основных типа построения структуры сайта:

  • Табличная;
  • Блочная.

Табличная верстка была доминирующей еще на заре зарождения интернета. К ее преимуществам можно отнести точность заданного позиционирования. Но, тем не менее, она обладает явными недостатками. Главными из них является объемность кода и низкая скорость загрузки.

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

Кроме высокой скорости загрузки блочное построение сайта позволяет в несколько раз уменьшить объем кода html . В том числе и за счет использования классов CSS .

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

Блочное построение на основе тегов также называют послойным, а сами блоки слоями. Это связано с тем, что при использовании определенных значений свойств их можно размещать один поверх другого подобно слоям в Photoshop.

Средства позиционирования

В блочной верстке позиционирование слоев лучше осуществлять с помощью средств каскадных таблиц стилей. Основным свойством CSS, отвечающим за расположение , является float.
Синтаксис свойства:
float: left | right | none | inherit ,
Где:

  • left – выравнивание элемента по левому краю экрана. Обтекание остальными элементами происходит справа;
  • right – выравнивание справа, обтекание остальными элементами – слева;
  • none – обтекание не допускается;
  • inherit – наследование значения родительского элемента.

Рассмотрим облегченный пример позиционирования блоков div с помощью этого свойства:

#left { width: 200px; height: 100px; float: left; background: rgb(255,51,102); } #right { width: 200px; height: 100px; float: right; background: rgb(0,255,153); } Левый блок Правый блок


Теперь постараемся с помощью этого же свойства расположить третий div по центру страницы. Но, к сожалению, у float нет значения center . А при задании новому блоку значения выравнивания вправо или влево он сдвигается в указанную сторону. Поэтому остается лишь всем трем блокам задать float: left :
Но и это не является оптимальным вариантом. При уменьшении окна все слои выстраиваются в один ряд по вертикали, а при увеличении размеров – прилипают к левому краю окна. Поэтому нужен более совершенный способ выравнивание div по центру. Центрирование слоев

В следующем примере мы будем использовать слой-контейнер, в котором разместим остальные элементы. Это решает проблему смещения блоков друг относительно друга при изменении размеров окна. Центрирование контейнера посредине осуществляется с помощью задания свойствам margin нулевого значения отступам от верхнего края и auto по бокам (margin: 0 auto ):

#container { width: 600px; margin: 0 auto; } #left { width: 200px; height: 100px; float: left; background: rgb(255,51,102); } #right { width: 200px; height: 100px; float: left; background: rgb(0,255,153); } #center { width: 200px; height: 100px; float: left; background: rgb(255,0,0); } Левый блок Центральный блок Правый блок


Этот же пример показывает, как можно отцентровать div по горизонтали. А если немного отредактировать приведенный выше код, то можно добиться вертикального выравнивания блоков. Для этого нужно лишь изменить длину слоя-контейнера (уменьшить его ). То есть после редактирования его css класс должен выглядеть вот так:

После изменения все блоки выстроятся строго в ряд посредине. И их положение не изменится при любых размерах окна браузера. Вот как выглядит такое центрирование div по центру по вертикали:


В следующем примере для центрирования слоев внутри контейнера мы использовали ряд новых свойств css :

#container { width: 450px; height:150px; margin:0 auto; background-color:#66CCFF; } #left { width: 100px; height: 100px; background: rgb(255,51,102); display: inline-block; vertical-align: middle; margin-left: 35px; } #right { width: 100px; height: 100px; background: rgb(0,255,153); display: inline-block; vertical-align: middle; margin-left: 35px; } #center { width: 100px; height: 100px; background: rgb(255,0,0); display: inline-block; vertical-align: middle; margin-left: 35px; }


Краткое описание свойств css и их значений, которые мы использовали в данном примере для центрирования div внутри div :
  • display: inline-block – выравнивает блочный элемент в строку и обеспечивает его обтекание другим элементом;
  • vertical-align: middle – выравнивает элемент посредине относительно родительского;
  • margin-left – устанавливает отступ слева.
Как из слоя сделать ссылку

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

#layer1{ width: 500px; height: 100px; background: rgb(51,255,204); border:groove; } a { display: block; text-align: center; height: 100%; color: rgb(255,0,51); } Ссылка на наш сайт


В данном примере с помощью строки display: block мы задали ссылке значение блочного элемента. А чтобы вся высота блока div стала ссылкой, установили height : 100%. Скрытие и отображение блочных элементов

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

Особенно это касается главной страницы, стоимость размещения рекламы на которой является самой высокой. Поэтому и появляется проблема, куда бы «впихнуть » еще один рекламный баннер. И тут уж выравниванием div по центру страницы никак не отделаешься!

Более рациональным решением является сделать какой-нибудь блок скрывающимся. Вот простой пример такой реализации:

#layer1{ display:block; width: 500px; height: 100px; background: rgb(51,255,204); border:groove; } function show() { if(layer1=="none") { layer1="block"; } else { layer1="none"; } document.getElementById("layer1").style.display=layer1; }

Это волшебная кнопка. Нажатие на нее скроет или отобразит скрывающийся блок.

Выше мы говорили о том, что позиционировать элементы страницы можно путем использования таблиц. Но это же можно делать и с помощью стилей. Среди параметров стиля имеются специальные свойства для позиционирования:

  • left - для задания расстояния в пикселах от левого края окна (х-координата);
  • top - для задания расстояния в пикселах от верхнего края окна (у-координата);
  • z-index - для указания порядка, в котором элементы будут перекрывать друг друга; это новое измерение, элементы с большим z-индексом будут появляться над элементами с меньшим z-индексом.

Конечно, при использовании этих трех свойств не создается эффект трехмерного пространства, но это уже нечто большее, чем плоская поверхность. В этом случае говорят о 2,5-мерном пространстве.
Кроме свойств-координат, нам понадобится свойство роsition , которое в сочетании со свойствами left и top позволяет устанавливать элементы в определенные позиции окна. Свойство position может принимать три значения:

  • absolute - заданные свойства left и top поставят элемент в точку с координатами х и у относительно верхнего левого угла контейнера (объекта, содержащего данный элемент). Если они определены для элемента вне контейнера, то началом отсчета координат будет верхний левый угол страницы. Заметим, что положение элемента не зависит от положения его тега внутри HTML-документа;
  • relative - элемент будет установлен в соответствии с тем, в каком месте исходного текста он находится; это значение установлено по умолчанию. Например, если элемент находится в трех строках от начала его выделения в тексте документа, то по умолчанию считается, что свойство позиционирования имеет значение relative , а свойства координат left и top - нулевые значения. Ненулевые значения свойств left и top задают сдвиг элемента относительно исходного положения;
  • static - элемент будет поставлен в некоторое положение относительно фона и не будет перемещаться при прокручивании страницы.

Следующий пример показывает использование свойства z-index . Хотя в тексте программы картинка описана выше остальных элементов, за счет присвоения ей индекса с большим номером происходит перемещение ее поверх первого текста. Таким образом, использование свойства z-index освобождает от пут естественного порядка упоминания элементов в тексте HTML-программы.


Позиционирование




nepBbiu позиционированный текст




Рис. 666. Использование свойства i-index позволяет изменить естественный порядок следования элементов в тексте HTML-документа

При позиционировании элементов может оказаться, что размеры элемента превосходят размеры фрагмента (отводимой области, заданной в нашем примере тегом ). Например, текст или картинка не помещаются полностью в прямоугольник, выделенный для них. На этот случай имеется свойство overwlow (переполнение). Свойство overflow может иметь три значения:

  • nоnе (ничего) - если элемент и выйдет за пределы фрагмента (отведенного для него места), он все равно будет показан;
  • clip - выступающие за границы фрагмента части элемента будут обрезаны;
  • scroll - будет использована прокрутка.

В следующем примере используется свойство overflow для создания механизма прокрутки первого текста.


Позиционирование




riepBbiM позиционированный текст

Второй позиционированный текст

Рис. 667. Механизм прокрутки текста, реализованный с помощью свойства overflow

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

С помощью свойств позиционирования нетрудно создавать для надписей эффект трехмерности. Идея состоит в том, чтобы вывести одинаковые по содержанию тексты слегка сдвинутыми друг относительно друга и окрашенными в различные цвета. Попробуйте в качестве упражнения написать соответствующую программу. На рисунке показано примерно то, что должно получиться. Ниже рисунка приведен один из возможных вариантов программы, которая создает «трехмерную» надпись.

Рис. 668. Пример создания трехмерного текста с помощью CSS


3d эффект

P (font-family: "sans-serif"; font-size: 96, -color: red)
P. highlight (color: silver }
P. shadow (color: darkred}



Объемный текст"

Oбъeмный текст

Объемный текст


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

Свойство position имеет следующие значения
static relative absolute fixed
Только совместно с ним применяются свойства (искл. position: static;)
top bottom right left
Одновременно могут присутствовать
margin transform float (искл. position: absolute; и position: fixed;)

.primer { border: 4px solid #456; width: 200px; background: #fff; position: fixed; position: static; position: relative; position: absolute; margin: 15px -15px -15px 15px; -moz-transform: translate(15px, 15px); -webkit-transform: translate(15px, 15px); -o-transform: translate(15px, 15px); -ms-transform: translate(15px, 15px); z-index: 100; float: left; top: 15px; bottom: 15px; right: 15px; left: 15px; } .primer1 { border: 4px solid #087e11; width: 200px; background: #e1e1e1; z-index: 200; position: relative; }

Добавить пустой тег перед div с class="primer" - .

Введение

Элементы на веб-странице занимают определённое пространство. По аналогии с корабликами в игре "Морской бой". Между кораблями должны быть пустые клеточки - margin.

Для того, чтобы один элемент поместить поверх другого, нужно задать отрицательное значение для margin. Но тогда содержимое тегов будет накладываться друг на друга. С помощью свойств position и они как бы приподнимаются на уровень 2.

В естественном порядке нижние теги в коде показаны над верхними. Благодаря z-index на уровне 2 можно самим определить видимый элемент.


Статического позиционирование - position: static;

position: static используется по умолчанию и отменяет действие relative, absolute и fixed. Значения свойств top, bottom, right, left игнорируются. При отсутствии transform не учитывается и z-index.

z-index: 3; } .svetlyi2 { background-color: #fff; width: 250px; z-index: 2; margin: 0px -30px -30px 30px; } .svetlyi3 { background-color: #f5f5dc; width: 250px; z-index: 1; } А Б В

Относительное позиционирование - position: relative;

Тому блоку, которому мы присвоим position: relative будет отдан приоритет. Содержимое нижнего элемента скрывается.

margin: 0px -60px -30px 60px; position: relative; А Б В

Для того, чтобы расположить блок Б поверх В, но ниже А, недостаточно присвоить и ему position: relative, поскольку в коде он стоит ниже блока А, а значит будет его перекрывать.

.temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;} .svetlyi1 { background-color: #ccc; width: 250px; margin: 0px -60px -30px 60px; position: relative; } .svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; position: relative; } .svetlyi3 { background-color: #f5f5dc; width: 250px; } А Б В

Нужно задать для элемента Б ещё и z-index меньше, чем у блока А.

.temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;} .svetlyi1 { background-color: #ccc; width: 250px; margin: 0px -60px -30px 60px; } .svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; } .svetlyi3 { background-color: #f5f5dc; width: 250px; } А Б В

Вместо margin при относительном позиционировании иногда лучше использовать свойства top, bottom, right, left. Точкой отсчёта для них является исходное положение элемента. При этом блок Б продолжает располагаться так, словно блок А находится на прежнем месте - он оставляет для него пустое пространство. Поэтому можно не колдовать с пустым div ().

.temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;} .svetlyi1 { background-color: #ccc; width: 250px; top: 30px; left: 60px; position: relative; z-index: 2; } .svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; position: relative; z-index: 1; } .svetlyi3 { background-color: #f5f5dc; width: 250px; } А Б В

Полная аналогия со свойством

.temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;} .svetlyi1 { background-color: #ccc; width: 250px; transform: translate(60px, 30px); z-index: 2; } .svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; position: relative; z-index: 1; } .svetlyi3 { background-color: #f5f5dc; width: 250px; } А Б В

Для встроенных элементов

Встроенные элементы margin не смещает вниз и вверх (). Только top, bottom

top: 30px; position: relative; БАБ или
.temnyi { background-color: #666; width:500px; font-size: 250%;} .svetlyi1 { background-color: #ccc; width: 250px; transform: translate(0px, 30px); } .svetlyi2 { background-color: #fff; width: 250px; } БАБ

Б А Б

Абсолютное и фиксированное позиционирование

Казалось бы, что блок с position: absolute должен находиться выше position: relative, но это нет так, тут действует естественный порядок. А значит z-index позволит между ними выбрать приоритетный элемент.

.temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;} .svetlyi1 { background-color: #ccc; width: 250px; margin: 0px -60px -30px 60px; position: relative; } .svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; position: absolute; } .svetlyi3 { background-color: #f5f5dc; width: 250px; } А Б В

Блок В игнорирует исходное положение блока Б, поскольку при position: absolute и position: fixed элемент перестаёт влиять на соседние теги ни посредством своей ширины/высоты, ни посредством float: left.

.temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;} .svetlyi1 { background-color: #ccc; width: 250px; margin: 0px -60px -30px 60px; position: relative; z-index: 2; } .svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; position: absolute; z-index: 1; } .svetlyi3 { background-color: #f5f5dc; width: 250px; margin-top: 20px; } А Б В

Итоговая таблица
отличительные свойства position: static; position: relative;
transform: translate(); 		position: absolute; position: fixed;
наложение элементы лучше не помещать друг на друга элементы имеет приоритет видимости над static. Другие значения равнозначны. Видимым будет тот, кто ниже находится в коде, либо обладает большим значением z-index
точка отсчёта top, right, bottom и left игнорируются исходное положение элемента край родительского элемента край окна браузера
элементы вокруг учитывают текущее положение элемента учитывают исходное положение элемента игнорируют положение элемента
width: 100%; это ширина элемента (для встроенного)/родительского элемента (для блочного) родительского элемента с position не в значении static окна браузера
при прокрутки страницы элемент перемещается "прилипает" к заданному месту окна браузера

А теперь для закрепления материала пощёлкайте по кнопкам в начале статьи, подумайте почему произошли именно такие изменения.

Как выровнять картинку по правому краю

Длинный абзац с несколькими предложениями. Он содержит текст, характеризующий помеченное флажком свойство, и изображение, которое нужно прижать к краю правой стороны.

Оно вынимает элемент из потока и прижимает к краю левой или правой стороны родителя. Элементы и текст, расположенные в коде после float-элемента, обтекают его с противоположной стороны.

Не наследуется, применяется ко всем элементам. вынимает элемент из потока и располагает поверх остального содержимого. Его можно перемещать относительно границ родителя, у которого значение position отлично от static , с помощью свойств top , right , bottom , left . При direction: ltr; свойство left имеет приоритет над свойством right , кроме случаев, когда свойство left имеет значение auto .

Длинный абзац с несколькими предложениями. Он содержит текст, характеризующий помеченное флажком свойство, и изображение, которое нужно прижать к краю правой стороны. .raz { text-align: right; } Свойство text-align наследуется, применяется к блочным элементам.
Выравнивает все содержащиеся в них строчные элементы и текст по горизонтали. Оно не перемещает сам элемент и не передвигает блоки, не работает, если задано строчному элементу. У него есть несколько значений, в том числе right, позволяющих сдвигать содержимое вправо. .raz img { display: block; /* смещает только блоки */ margin-left: auto; } Свойство margin-left не наследуется, применяется ко всем элементам. У него есть значение auto, которое выравнивает блочный элемент по горизонтали. А именно margin-left: auto; прижимает элемент к правому краю родителя. Это положение может изменяться свойством margin-right..html">При margin-left: auto; и margin-right: auto; элемент размещается по центру ширины предка. .raz img { float: right; } Свойство float не наследуется, применяется ко всем элементам. Оно вынимает элемент из потока и прижимает к краю левой или правой стороны родителя. Элементы и текст, расположенные в коде после float-элемента, обтекают его с противоположной стороны. .raz { position: relative; /* смещает относительно родителя с классом raz */ } .raz img { position: absolute; right: 0; } Свойство position не наследуется, применяется ко всем элементам. position: absolute; вынимает элемент из потока и располагает поверх остального содержимого. Его можно перемещать относительно границ родителя, у которого значение position отлично от static, с помощью свойств top, right, bottom, left. При direction: ltr; свойство left имеет приоритет над свойством right, кроме случаев, когда свойство left имеет значение auto. .raz { display: table; } .raz div { display: table-cell; vertical-align: top; /* */ } Свойство display не наследуется, применяется ко всем элементам..html">тегу table, а table-cell — td. Совет: на данном примере занятно поглядеть как ведёт себя картинка, когда уменьшается размер окна браузера. Как выровнять текст по правому краю

Короткий текст справа

.raz { text-align: right; } Короткий текст справа .raz { margin: 0; border-top: solid 2px; padding: 0; overflow: auto; /* очистить float */ } .raz li { clear: both; } .raz span { float: right; white-space: nowrap; /* */ } Похожие материалы:

  • горизонтальное выравнивание html обновлена
  • выравнивание по ширине html хочу обновить

    Как выровнять блок по правому краю

    .raz div { max-width: 8em; /* блок занимает ширину родителя, max-width её ограничивает */ min-height: 2em; margin-left: auto; margin-right: 0 ; HTML код

    Элемент не влияет ни на высоту, ни на ширину родителя, не вызывает его переполнения.

    .raz { position: relative; padding-right: 8em; /* чтобы элемент не был поверх содержимого родителя */ } .raz div { position: absolute; top: 0 ; /* прикрепить к верху родителя */ right: 0 ; HTML код Текст

    Элемент не влияет на высоту родителя, если не очистить float .

    .raz div { float: right; /* блок занимает ширину содержимого, max-width её ограничивает */ max-width: 8em; min-height: 2em; border: 1px solid orange; background: #fff5d7; } HTML код Текст

    .raz { text-align: right; } .raz div { display: inline-block; /* inline-block занимает ширину содержимого, max-width её ограничивает */ max-width: 8em; min-height: 2em; border: 1px solid orange; text-align: start; /* убрать наследование text-align */ background: #fff5d7; } HTML код

    Как выровнять несколько блоков по правому краю

    .raz div { width: 8em; max-width: 100%; min-height: 2em; border: 1px solid orange; background: #fff5d7; }

    .raz { text-align: right; } .raz div { display: inline-block; /* см. */ width: 8em; max-width: 100%; min-height: 2em; border: 1px solid orange; vertical-align: middle; /* см. */ text-align: start; background: #fff5d7; }

    .raz div { width: 8em; max-width: 100%; min-height: 2em; margin: 0 0 0 auto; /* то же, что margin-left: auto; */ border: 1px solid orange; background: #fff5d7; }

    .raz div { float: right; width: 8em; max-width: 100%; min-height: 2em; border: 1px solid orange; background: #fff5d7; } .raz::after { /* очистить float */ content: ""; display: block; clear: both; } margin: 0 100% 0 -100%; /* можно не добавлять ещё одну обёртку, а в предыдущем стиле указать transform: translate(-100%, 0); */ background: green; } код HTML

    • Разделы