Css position relative overflow hidden

How to make absolute positioned elements overlap their overflow hidden parent

I believe, every front-end developer encountered this situation, at least once. Let’s say you need to absolute position something… And then you try to move it in some direction, and boom it disappears… You forgot the parent was set to overflow:hidden and now your element is lost in the hidden infinite vacuum.

Well, usually it ends by putting the absolute element outside of the annoying overflow:hidden parent, and you grumbling about how CSS sucks and so on… Actually you’re quite right. CSS do sucks a lot, even CSS3, I mean … ok no troll here 🙂

Let me show you a neat trick.

But first, if you’re trying to mess with these absolute/relative properties you really should be aware of these few important rules:

• An absolutely positioned element is actually positioned regarding a relative parent, or the nearest found relative parent, which means it bubbles up the DOM until it finds a relative context to apply the positioning.
• If no relative parent is found it will then reach the highest possible « container », which is the browser window, aka the viewport (or the document maybe, or the window … ? hey you know what, I’m not a W3C expert ok!).
• BTW, this is probably why they called it « re-la-tive », just sayin’ 😛
• It works the same if the parent is set to absolute instead of relative (an absolute inside another absolute ) the first absolute acts as the positioning context for the second absolute.

Anyway, here our main problem is that the relative parent is also the overflow:hidden one. Well, if we simply move the position rule to put it just one level above, then the problem will be solved. True. Isn’t that just magic? Actually no, it’s not magic.

And let me prove what I’m saying.

Источник

и в IE

В IE 6/7 абсолютно ( position: absolute ) или относительно ( position: relative ) позиционированные блоки имеют обыкновение игнорировать объявление overflow: hidden содержащего их элемента (контейнера) и преспокойно выступать за пределы его границ.

Для решения этой проблемы достаточно задать относительное позиционирование ( position: relative ) самому контейнеру:

CSS: /* дочерний элемент */
#child

• Паршуков Алексей2008-09-18 только вот одним overflow: hidden; дело не ограничиваеться.
  У IE вообще Много проблем с позиционирование. Напрмиер position: relative; плохо себя ведёт относительно документа, если менять размер окна или размер родительского элемента через js. К счастью многие проблемы решаються вышеупомянутым способом.
• Максим Покровский2008-09-22 Очень много багов лечится position:relative;
  Проблема только в шестерке или семерка тоже шалит?
• Паршуков Алексей2008-09-26 Я пока не нашёл положительных сдвигов в седьмой версии. Надеемся, что хотябы в IE8 ситуация кардинально поменяться.
• Василий 2009-01-18 а что, если и этот хак не помогает?
  у парента
  background-color:#424242;
  background-image:url(../postBG.gif);
  background-repeat:repeat-x;
  border:1px solid Black;
  float:left;
  margin:0 5px 5px 0;
  position:relative;
  width:160px; у вложенного чаилда background-image:url(../postHeadBG.gif);
  background-repeat:repeat-x;
  color:White;
  font-size:12px;
  line-height:25px;
  overflow:hidden;
  padding-left:5px;
  position:relative;
  white-space:nowrap;
• Marat Tanalin(автор)2009-01-20 Василий: у вас правило задано для дочернего блока вместо родительского.
• Василий 2009-01-21 сорри
  я плохо пояснил текст, который должен скрываться при «невлезании» находится в дочернем
  который в свою очередь органичен роительским так вот
  из за текста дочерний «разрывает» родительский
• Marat Tanalin(автор)2009-01-21 В IE6 правило имеет смысл только при явном указании одного из измерений (ширины или высоты). У вас ширина и overflow заданы для разных элементов.
• Василий 2009-01-21 спасибо
  я думал внешний конейнер «сожмет» внутренний и ограничит его
  буду знать
• Switch 2009-08-12 а если парент должен быть абсолютным?
• Marat Tanalin(автор)2009-08-13 Switch: абсолютное позиционирование родительского элемента в описанном отношении приводит к тому же результату, что и относительное — проблема как таковая просто не возникает.
• а 2010-04-12 ААА респект большущий!
• RE 2010-07-05 Спасибо, помогло! пс: отличная форма ответов)
• Safec 2010-07-15 большое спасибо. помогло )
• MahmudS 2011-02-09 С вылезанием содержимого дива за его пределы помогло. Но у меня почему-то еще один баг вылезает, аккурат в IE 7 (в восьмом и в браузерах нормально). А именно начинают пропадать картинки (они таблицей выводятся) и появляется только при наведении на ссылку под картинкой. Всеравно, спасибо за совет, помогло 😉
• MahmudS 2011-02-09 Ааа, все, разобрался и с пропаданием картинок =) Вот я дурак, надо было всего лишь зафиксировать ширину этого div’a =)
• Ян2011-05-19 Да, я с этим overflow в своё время о х как намучался 🙁
• MaxD 2011-05-24 Спасибо огромное. Благодаря вашей подсказке я могу пойти уже домой
• play 2012-02-09 Ураааа. Получилось. Спасибо огромное!
  Как говорится, век живи — век учись))
• Rex 2012-09-06 Спасибо, совет помог для IE8. Да, в нем баг остался 🙁
• Дмитрий 2012-10-26 Спасибо!
  В FF то же самое происходит — элементы с position:absolute не скрываются в overflow:hidden, но если задать ему position-relative, то все работает как надо.
• Marat Tanalin(автор)2012-12-11 Дмитрий, снабжена ли соответствующая HTML-страница правильным DOCTYPE-объявлением?
• Анатолий 2013-03-29 Эффект остался не только в IE8, но и в IE10. Так что вопрос — баг ли это?

• bugs,
• css,
• ie,
• кроссбраузерность

• Firefox 114
• Firefox 113
• Firefox 112
• Firefox 111
• Firefox 110

• Как сделать кнопку ссылкой
• Правильный DOCTYPE в HTML5
• Сброс стилей в CSS
• Отключение Caps Lock в Windows
• Dell P2415Q. Авторский обзор 4K-монитора
• Asus PQ22UC — 22″ OLED-монитор 4K
• Dell UP3017Q — 30″ OLED-монитор 4K

Перепечатка любых материалов сайта в любом объёме запрещена

Источник