Убираем отступ снизу 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

youtube.com/watch?v=7hFivbgIEqk

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

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