Т. е. float: left - привязывание блока к левому краю контейнера (блока, его содержащего) - в нашем примере таким контейнером
является внешний DIV, в котором находится данная статья.
Далее думаю понятно: width: 400px - ширина блока 400 пикселей
height: 180px - высота - 180, сразу дам совет если ваш блок планируется "резиновым" по высоте, тогда не указывайте атрибут height.
Соответственно цвет фона для блока - красный - background: #cc0011
Внутри красного блока DIV как видим расположен грязно-желтого цвета блок DIV.
Чтобы он остоял от левого края своего контейнера на 140 пикселей и от верхнего края на 50 пикселей зададим такой код -
С шириной и высотой, а также цветом фона думаю Вам всё понятно, а вот новые атрибуты требуют пояснения
position: relative - задает расположение блока DIV "относительным" - т. е. смещения указанные у left и top задают относительное смещение внутри "родительского" контейнера - т. е. контейнера в котором расположен наш желый блок - по отношению в внешнему - красному блоку.
И вот тут таится главная ошибка всех НАЧИНАЮЩИХ ВЕРСТАЛЬЩИКОВ -
ИСПОЛЬЗОВАНИЕ position ТАМ, ГДЕ ЭТО СОВСЕМ НЕ НУЖНО.
!!! ПРАВИЛЬНО РЕШЕНИЕ ТАКОВО - используйте position там, где можно обойтись обычным float + margin. !!!
Т. е. блоки нужно выравнивать друг относительно друга с помощью атрибута margin - тот же самый пример более правильно записать так -
Но как видите приводит к тому, что места теперь уже хватило лишь 1 блоку.
Остальные блоки оказались совсем не там, где ожидалось.
Это самый большой камень преткновения в верстке - добиться с одной стороны универсальности, а с другой - правильного расположения блоков в любых ситуациях.
МЫ ПОДОШЛИ К ГЛАВНОМУ - вы наверное уже заметили использование нового атрибута - z-index
z-index всегда применяется совместно с position, поскольку без него просто не работает,
а используется он для позиционирования блоков по оси z - т. е. блоки с меньшими z располагаются на заднем плане, а блоки с большим z - поверх них.
Именно для такого позиционирования и правильно применять атрибут position, а во всех остальных ситуациях старайтесь обходиться простыми float + margin как было показано выше или вообще сверстать нужную часть страницы не блоками DIV, а при помощи TABLE (таблицы).
Считать, что "ДИВНАЯ" верстка более современна, а "ТАБЛИЧНАЯ" якобы устарела - в корне неправильно !
Почему ?
Да потому что бывают такие ситуации в верстке, когда обойтись без таблиц просто невозможно, особенно в плане поддержки очень старых браузеров, таких как IE 6, IE 5.5 или ниже.
Простой пример - красивое оформление форм - с позиционированием элементов по левому, правому краю. (см. например ФОРМУ ВХОДА нашего сайта или ФОРМУ для отправки комментариев).
Главное правило тут такое - старайтесь применять верстку DIVами, а когда это невозможно - таблицами. Тогда ваша верстка будет более универсальной и в то же время - отвечать требованиям времени.
На сегодня наш урок закончен, материала вам думаю будет достаточно и для экспериментов и для осмысления.
megainfomatic yookassa module Модуль подключения к yookassa.ru для любой cms, megainformatic messenger - Лучший и самый простой мессенджер для общения, запускай прямо из браузера! Что такое нейросеть? - книга 2026, 128 страниц. Каксоздатьигрунаgodotкнига, 128 страниц, 2026
скачать
использовать
читать
читать, скачать
Все секреты нейросетей.Оцифровка сознания книга, Ежемесячный журнал комиксов и инди-игр Мегаинформатик #2 (26) февраль 2026, Img Gen Megainformatic Img2Txt модуль распознавания изображений для Stable Diffusion WebUI Forge, Модуль подключения к Яндекс Маркет megainformatic yandex.market digital delivery universal для доставки цифровых товаров
читать
читать
скачать
читать
Ежемесячный журнал комиксов и инди-игр Мегаинформатик #9 сентябрь 2025+, #1 (25) январь 2026, Img Gen Megainformatic - локальная Нейросеть для генерации изображений, Img Gen Megainformatic Log модуль для Forge версии 2024-Aug-10 - локальной Нейросети для генерации изображений
читать
читать
скачать
скачать
Ежемесячный журнал комиксов и инди-игр Мегаинформатик #12 декабрь 2025, комиксы: Веб-Мастер и Маргарита #14, Кыся #3 - комикс фэнтези, Твое будущее #1 - комикс
смотреть
читать
скачать
октрыть
Ежемесячный журнал комиксов и инди-игр Мегаинформатик #11 ноябрь 2025, комиксы: Сикс Икс Икс - Двойное дно (6xx) #14 - комикс 18+, Несравненная Рокси #1 - комикс 18+, Эмми город надежд #3 - комикс
смотреть
читать
скачать
скачать
комиксы, Ежемесячный журнал комиксов и инди-игр megainformatic.ru #10 октябрь 2025, #6 июнь 2025+ дополнение к основному номеру за июнь, Полное превращение #1 - комикс, #7 июль 2025+ дополнение к основному номеру за июль
смотреть
скачать/читать
читать
интересное
комиксы, Ежемесячный журнал комиксов и инди-игр megainformatic.ru #9 сентябрь 2025
смотреть
читать
смотреть
starcraft комикс
комиксы
смотреть
читать комикс
читать
читать
комиксы
читать
смотреть
читать
читать комикс
игра Fishka. Ежемесячный журнал комиксов и инди-игр megainformatic.ru #8 август 2025, другие комиксы
играть
читать
читать
комикс
ежемесячный журнал комиксов и инди-игр megainformatic.ru #6 июнь 2025 - специальный выпуск Квантум 28 страниц win/linux/android/html5/pdf полная версия скачать или запустить в браузере, игра lollypop 1994 времен ms-dos, ежемесячный журнал комиксов и инди-игр megainformatic.ru #5 май 2025+ 18+ дополнение к основному номеру. Все выпуски за 1 полугодие 2025 года в одном номере - #1 январь - #6 июнь 2025 108 страниц pdf/win/linux/android/html5
скачать
играть
читать
читать
ежемесячный журнал комиксов и инди-игр megainformatic.ru #5 май 2025 - выпуск 5, #6 июнь 2025 - выпуск 6, #4 апрель 2025 спец. выпуск GAME дополнение к апрельскому номеру - все комиксы по играм!, выпуск #7 июль 2025
скачать
читать
открыть
смотреть
журнал комиксов - приложение к журналу комиксов megainformatic.ru #1 январь 2025 - выпуск 1, журнал комиксов #4 апрель 2025, 18+ дополнение #3 к журналу март 2025, 18+ дополнение #2 к журналу февраль 2025
читать
журнал
18+ дополнение #3
18+ дополнение #2
игра, журналы комиксов - номера за 2025 год - январь 2025 - март 2025
играть
смотреть
читать
журнал
игры, сервисы
играть
играть
случайный сайт
играть
видео-рассказ, уроки godot, виртуальный помощник по поиску информации
играть
читать
купить
скачать
игры Многоликий: dress - hordes эпизоды с 1 по 4
играть
скачать
купить
купить
игры, музыкальные клипы
скачать
скачать
смотреть
скачать/играть
музыкальный клип, игры
смотреть
играть
скачать
скачать
разработка игр, анимационный фильм, новогодняя дискотека 2020 - песни на итальянском, игра про лифт
смотреть
смотреть
смотреть
смотреть
игры, инструменты разработки, анимационный фильм, фильм.
купить
смотреть
смотреть
скачать
игры
скачать
скачать
скачать
купить
игры в браузере
играть
играть
играть
играть
игры в браузере
играть
играть
играть
играть
игры в браузере
играть
играть
играть
играть
игры в браузере
играть
играть
играть
играть
игры в браузере (3), создание музыки в браузере (1)
играть
играть
играть
играть
игры в браузере
играть
играть
играть
играть
игры в браузере
играть
играть
бк 0010.01 - играть!
играть
игры в браузере
играть
играть
играть
играть
игры в браузере (3), скачиваемые (1)
играть
играть
играть
скачать
игры в браузере
играть
играть
играть
играть
игры в браузере, скачиваемые игры
играть
скачать
играть
играть
игры в браузере
играть
играть
играть
играть
игры в браузере
Foxyland 2
quidget 2
играть
играть
полезный софт, игры в браузере
скачать
anova игра
A Knots Story
sabotage
сервисы, игры
24500 руб.
скачать
игра
играть
игры, программы
купить / скачать
купить
5500 руб.
скачать
поздравления, уроки рисования, уроки создания сайтов
читать
читать
читать
150 руб.
комиксы, музыка, рассказы
читать
читать
слушать
читать
игра для разработки, калькулятор услуг, cms, комикс
250 руб.
разработка на заказ
1250 руб.
350 руб.
игры для разработки, комиксы
скачать
читать
читать
скачать
игры шарики и ямки, комиксы про Костю Коробкина, ria xxl игра, fly snow 3d генератор эффектов снега, частиц и др. -
скачать
читать
150 руб.
350 руб.
Создай свою игру на fle game engine -
800 руб.
240 руб./скачать
скачать
скачать
Для создания сайта - модуль отзывов/комментариев для вашего сайта в составе megainformatic cms express files -
700 руб.
1250 руб.
150 руб.
500 руб.
Уроки Flash, бесплатные Flash - игры.
бесплатно
бесплатно
2500 руб.
14000 руб.
Поддержка сайтом нескольких языков (multi lang), создание собственной системы личных кабинетов, соц. сети или фриланс - биржи (megainformatic cms social), создание сервиса коллективных покупок на базе megainformatic cms groupon, онлайн сервис подсчёта статистики ключевых слов в статьях вашего сайта keywords gen + описание кода данного сервиса, с возможностью бесплатно реализовать его аналог на своём собственном сайте.
500 руб.
12000 руб.
14000 руб.
бесплатно
megainformatic.ru/webjob/ - сервис для фриланс проектов
- место встречи заказчиков и исполнителей
megainformatic.ru/webjob/ - сервис для фриланс проектов
- место встречи заказчиков и исполнителей
Системы управления сайтом, уроки
1250 руб.
бесплатно
550 руб.
500 руб.
megainformatic cms admin - простая и компактная система
для работы и управления сайтом
350 руб.
5800 руб.
3000 руб.
500 руб.
megainformatic cms free и серия продуктов - Уроки Photoshop
бесплатно
650 руб.
700 руб.
750 руб.
Данная серия посвящена описанию приемов и методов создания изображений,
с помощью инструментария программы Adobe Photoshop. Кроме того, многие
описанные средства могут вам помочь при освоении и многих других программ
для работы с растровой графикой - GIMP, Corel Photo Paint и других.
бесплатные игры 2d и 3d, а также эмулятор Ну, Погоди!
300 руб.
бесплатно
бесплатно
бесплатно
Это серия распространяемых бесплатно игр. Вы не только можете поиграть,
но и скачать исходники, получив тем самым возможность внести изменения
в игру или создать новую !!! (эмулятор Ну, Погоди! распространяется платно).
серия игр про Веселого Буквоежку, и бесплатно распространяемая игра
Нечто: Необъяснимое - в плену желаний
350 руб.
510 руб.
fle game engine
бесплатно
Здесь представлены новинки жанра - Говорящий Комикс, Настольная игра,
А также продукт, который позволит Вам научиться создавать игры самостоятельно.
Ну и конечно изюминка в своём роде - бесплатная игра - Нечто: Необъяснимое
- в плену желаний
Серия бесплатных онлайн уроков, посвященных 3ds max, photoshop, c++,
directx, delphi и php.
бесплатно
бесплатно
бесплатно
бесплатно
бесплатно
бесплатно
500 руб.
300 руб.
Описаны практические примеры решения различных задач, возникающих при
создании игр и сайтов.
Продукты Набор разработчика и Ваше Визуальное Шоу распространяются платно.
уроки и продукты различной тематики
бесплатно
бесплатно
бесплатно
400 руб.
Бесплатные Уроки Photoshop free, Бесплатные Уроки по программированию
на delphi directx - Как создать игру Ну, Погоди!, Бесплатная Авторская
музыка в формате mp3 - Музыкальные Миры, Платно распространяемый продукт
megainformatic cms express - система для быстрого создания Вашего сайта
на php + my sql.
Проекты игр, уроки
450 руб.
бесплатно
бесплатно
бесплатно
Игра Веселый Буквоежка, уроки delphi directx 8.1 для начинающих (описываются
основы 3d игр), моделируем девушку в 3d studio max, уроки музыки - пишем
музыку в Fruity Loops Studio
megainformatic
cms express files - это простое, быстрое и очень компактное решение
для создания первого вашего сайта. НЕ ИСПОЛЬЗУЕТ базы данных mysql.
Вместо этого используются файловые базы данных. Поэтому Вы
можете использовать систему даже на хостинге с поддержкой php, но
без поддержки баз данных my sql.
Очень
проста в установке - достаточно вам скопировать все файлы на ваш
хостинг и сайт готов к работе !!!
В комплект входят 3 готовых шаблона, модули поиска и карты сайта,
а также статьи по основам создания сайта.
Первый день зимы Первый день зимы
Наступил первый день настоящей зимы. Утром было -9 градусов.
Снег, который выпал накануне и почти расстаял, уже не таял и
казалось, что его стало даже больше.
Погода стояла ясная и солнечная. Хотя и морозная, но это был
первый день по-настоящему зимней погоды. До этого температура
колебалась между 0 и -1 градусов, а потому снег, который изредка
выпадал,