Описывается взаимодействие основных CSS свойств ‘float’, ‘position’ и ‘display’.
На размещение элементов на Web странице большое влияние оказывают их CSS свойства ‘float’, ‘position’ и ‘display’. При этом каждому элементу соответствует (или отсутствует) бокс в соответствии с правилами Модель CSS бокса. Эти боксы формируются под воздействием ряда факторов, например:
- размера и типа бокса(блочный бокс или строчный);
- схемы позиционирования(нормальный поток, плавающий, абсолютный);
- взаимодействие элементов;
- внешних факторов(размеров экрана просмотра и прочее)
Поэтому очень важно знать правила их взаимодействия, ведь это определяет внешний вид страницы. А взаимодействуют эти свойства следующим образом.
1. Если элементу установлено display:none; то бокс не генерируется, а значения свойств float и position игнорируется.
2. Иначе, в случае установки position:absolute или position:fixed, свойство display устанавливается в значение block, а float принимает значение none. При этом позиция элемента на странице будет определяться величинами смещений top, right, bottom и left. При свойстве position:absolute смещения отсчитываются от границ контейнера, у которого в CSS стоит значение position:relative. При значении position:fixed смещения отсчитываются от границ окна просмотра, элемент при этом не изменяет своего положения при скроллинге.
3. Иначе, если установлено float:left или float:right, свойству display устанавливается значение block и элемент становится плавающим.
4. Иначе применяется оставшееся значение свойства display.
Примечание. Если значения этих свойств изменяются скриптом, то поведение элемента не будет однозначно определено.