Позиционирование средствами CSS

Позиционирование на основе плавающих элементов. Центрирование

Позиционирование на основе плавающих элементов.

Не существует такого вида позиционирования как "плавающий", и "плавающие" элементы должны быть позиционированы статически (что автоматически достигается при отсутствии определения свойства position ). Однако свойство float позволяет модифицировать нормальный поток ещё одним способом. "Плавающий" (floating) элемент примыкает к левой ( float:left ) либо правой ( float:right ) границе своего контейнера, а последующие элементы (как блочные, так и строчные) обтекают его с противоположной стороны. Это нашло чрезвычайно широкое применение в CSS-вёрстке (об этом говорится в отдельной лекции).

div {
      width: 40%;
      float: left;
      margin: 3px;
      padding:3px;
      border:solid 1px blue;
      color:Blue;
    }
  ...
  <div>
    Это плавающий контейнер div - Lorem ipsum... </div>
  <div>
    Это плавающий контейнер div - Lorem ipsum ...</div>

.floating {
      float: right;
      width: 40%;
      margin-right: 3px;
      padding: 3px;
      border: solid 1px blue;
      color: Blue;
    }
  ... 
  <div>
 
    <div class="floating">
      Это плавающий контейнер div - Lorem ipsum...
    </div>
 
    Это текст, обтекающий плавающий контейнер - Lorem ipsum ...
  </div>

Центрирование элементов на странице

Если задать блочному элементу значение auto в свойствах margin-left и margin-right, то он центрируется по горизонтали в своём контейнере. При этом у элемента должна быть задана ширина. Для старых браузеров (IE5-) этот приём не срабатывает, и тогда применяются менее изящные способы. Чтобы центрировать строчный элемент (например, img), его обычно помещают в блочный (либо назначают ему свойство display:block, тем самым делая блочным его самого).

Для вертикального центрирования применяют другую технологию: позиционируют блочный элемент абсолютно левым верхним углом в центр экрана ( top:50%; left:50%; ) и затем смещают влево и вверх путём задания отрицательных отступов.

div {
      margin-left: auto;
      margin-right: auto;
      width: 300px;
      background: #ccc;
    }
  ...
  <div>
    Если задать блочному элементу значение auto в свойствах margin-left и
    margin-right, то он центрируется по горизонтали в своём контейнере...
  </div>

img {
        width:747px;
        height:500px;
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-250px;
        margin-left:-373px;
    }
  ...
   <div>
    <img src="Cypripedium M.jpg" alt="Cypripedium macranthos Sw" />
  </div>

Относительное и фиксированное позиционирование. Наложение элементов

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

Один из эффективных приёмов позиционирования состоит в том, чтобы размещать маленькие объекты относительно других объектов на странице, например, блок внутри блока. Для этого блок-контейнер позиционируют относительно (при этом он остаётся на месте и не выбивается из нормального потока), а внутренний блок - абсолютно. Точнее, абсолютная позиция отсчитывается от первого блока в ряду контейнеров, который имеет позиционирование absolute, relative или fixed (но не static ). Если такого контейнера нет, то им считается окно. Пример 6.8 показывает размещение абсолютно позиционированного элемента span в правом нижнем углу его контейнера div.

div {
      width: 70%;
      border: 4px dotted gray;
      padding: 4px;
      padding-bottom: 30px;
      position: relative;
      margin: 10px auto;
    }
    div span {
      position: absolute;
      bottom: 0;
      right: 0;
      background: #ddd;
      padding: 2px;
      margin: 2px;
    }
  ...
  <div>
    <span>Внутренний блок 1</span> Один из эффективных приёмов позиционирования
    состоит в том, чтобы размещать маленькие объекты относительно других объектов
    на странице, например, блок внутри блока. Для этого блок-контейнер позиционируют
    относительно (при этом он остаётся на месте и не выбивается из нормального
    потока), а внутренний блок - абсолютно.
  </div>

  <div>
    <span>Внутренний блок 2</span> Данный пример показывает размещение абсолютно
    позиционированных элементов span в правых нижних углах их контейнеров.
    Внутренние блоки позиционированы посредством задания свойств bottom: 0;
    right: 0;
  </div>

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

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

Часто бывает нужно, чтобы некоторые элементы страницы были постоянно видимыми, например, навигационная панель, поле для поиска или логотип сайта, а, как известно, большинство веб-страниц длиннее высоты экрана. Используя значение fixed свойства position, вы можете зафиксировать некоторые элементы в определенных местах, разрешая при этом пользователям прокручивать содержимое очень длинной веб-страницы. Фиксированное позиционирование работает во многом подобно абсолютному — вы точно так же можете использовать свойства top, bottom, left или right для размещения элемента. Как и абсолютное, фиксированное позиционирование удаляет элемент из потока HTML. Он "плавает" над другими частями страницы, которые просто игнорируют его. Фиксированное позиционирование не работает в Internet Explorer версий 6 и ниже.

div {
      margin-left: 210px;
    }
    .fixed {
      position: fixed;
      left: 10px;
      top: 100px;
      list-style-position: inside;
      margin: 10px;
      border: 1px solid black;
      background: #ccc;
      padding: 3px;
      width: 170px;
    }
  ...
  <ul class="fixed">
    <li>Это список,</li>
    <li>позиционированный фиксированно</li>
    <li>в точке (10px; 100px)</li>
  </ul>

  <div>
    <p>
      Это длинный блок текста, и для его полного просмотра нужно прокручивать
      страницу вниз. Фиксированно позиционированный список при этом остаётся
      на месте.
    </p>
  ...
  </div>

Наложение элементов

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

img {
      position: absolute;
      width: 50%;
    }
    img:hover {
      z-index: 1000;
    }
  ...
  <img src="Crataegus.jpg" alt="Crataegus" title="Crataegus" />
  <img style="top: 10%; right: 0" src="Cypripedium C.jpg" alt="Cypripedium C" title="Cypripedium calceolus" />
  <img style="top: 40%; right: 30%;" src="Cypripedium M.jpg" alt="Cypripedium M" title="Cypripedium macranthos Sw" />

Вопросы