Подготовка Сначала подготовьте страницу и изображение, мы используем это изображение:
Мы просто пишем HTML следующим образом:
| <div id="контейнер"> <img id="logo" src="logo.png" alt="Ли Манро" /> </div> |
Стиль CSS может выглядеть следующим образом:
| body{background:#999;} #контейнер{ ширина: 960 пикселей; фон:#fff; поле: 20 пикселей авто; отступ: 10 пикселей; } |
Ниже приведен предварительный просмотр эффекта:
Установите относительное позиционирование. Когда мы позиционируем логотип, мы хотим, чтобы его положение было относительно контейнера, поэтому используйте относительное позиционирование:
| #контейнер{ ширина: 960 пикселей; фон:#fff; поле: 20 пикселей авто; отступ: 10 пикселей; положение: родственник; } |
Разместите его за пределами контейнера. Теперь все, что вам нужно сделать, это расположить логотип горизонтально, чтобы он выступал из контейнера.
| #logo{ позиция: абсолютная; слева: -15 пикселей; } |
Теперь мы видим, что логотип отображается вне рамки.
