Убираем отступ снизу position: relative

Здесь Вы можете лицезреть, как 2-ой блок перекрывает 1-ый блок, но самое интересное, что делает он это с помощью: position: relative. Согласно правилам, position: relative - это положение элемента устанавливается относительно родителя, иными словами, контейнера, в который вложен элемент.

Если родительский элемент явно не задан, то в качестве него выступает окно браузера. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от родителя, в зависимости от применяемого параметра.

Все верно, так и есть, но, если поднять элемент (top: -100px;), то после него остается некое объявленное под него пространство, поэтому важно поднять и объявленное пространство (margin-bottom: -100px;). Без этого, после поднятого элемента остается пустота. Вот наглядный пример правильного перекрытия:

1-ый блок
2-ой блок
3-ий блок

Кстати, в разных браузерах перекрытие происходит по разному!

Вот, как выглядит код:

<div style="border: #33FF33 3px dotted; height: 100px;">1-ый блок</div>
<div style="position: relative; top: -100px; margin-bottom: -100px; z-index: 5; border: #00FFFF 3px dotted; height: 100px; padding-left: 55px;">2-ой блок</div>
<div style="border: #FF00CC 3px dotted; height: 100px;">3-ий блок</div>

Оцени публикацию:
  • 34,141
Оценили человек: 34
Теги : css, position, relative

Похожие статьи:

Справочники и учебники:


Комментарии посетителей:
  • thnx
    12 ноября 2009, 17:35 коммент полезен : +1 # Гость
  • Оригинальный способ
    08 января 2010, 13:01 коммент полезен : +1 # Гость
  • спасибо за помощь(yea)
    17 февраля 2010, 11:21 коммент полезен : +1 # Алексей (гость)
  • хех, пригодилось
    19 февраля 2010, 06:53 коммент полезен : +1 # Гость
  • спасибо, помогло...
    09 июля 2010, 14:51 коммент полезен : 0 # Илья (гость)
  • Спасибо огромное, два дня боролся с этим расстоянием снизу после позиционирования релативом когда менял top
    23 июля 2010, 07:30 коммент полезен : 0 # Joni_mnim
  • Реально помогла статейка. Спасибо. :-)8  
    19 декабря 2010, 20:14 коммент полезен : 0 # Коляныч
  • СПАСИБО!!!ПОМОГЛО!!!УРРРААА!!!
    04 января 2011, 22:15 коммент полезен : 0 # Гость
  • Спасиб8) ки, ОГРОМНОЕ
    27 января 2011, 19:21 коммент полезен : +1 # Елена
  • Спасибо!!! Очень кстати было прочесть)))
    12 апреля 2011, 06:53 коммент полезен : +1 # Евгений (гость)
  • Просто и со вкусом)
    28 июня 2013, 23:51 коммент полезен : +1 # Иван3
  • 3 часа корячился! если бы не ты то..... Спасибо брат!
    13 января 2014, 15:23 коммент полезен : +1 # Moy-email_83
  • лучше расскажите как убрать это пространство кроссбраузерно. А то в opera и chrome оно убирается как нужно, а вот в ff ,ie совсем не так, как нужно.
    08 февраля 2016, 10:36 коммент полезен : 0 # Мопс
  • Спасибо друг!!!!
    19 октября 2016, 14:36 коммент полезен : 0 # Алексей7
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

Новые заметки:

Про что мы забываем когда делаем оценку задачи по времени

Список вопросов для собеседования разработчика по телефону

Symfony2 авторизация без Doctrine2 для чайника

Phpstorm7 LiveEdit

Жесткий хабр или не хабр, тогда кто?

Яндекс.Деньги мошенничество

Как узнать какие страницы в поиске яндекса или это секрет

Последние комменты:

Yapro CMS:

Здравствуйте, Гость | Войти | Регистрация | Карта сайта | RSS ленты | Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2018 YaPro.Ru

Главная » Веб-мастеру » CSS »