Как игнорировать переполнение родительского элемента: скрыто в css

У меня есть элемент div, который обертывает другие элементы div таким образом:

<div style="overflow:hidden"><div id="a"></div><div id="b"></div></div>

У меня есть другие правила CSS, которые управляют размерами внешнего div. В моем фактическом коде я хочу расположить div # ровно на 10 px ниже внешнего div. Тем не менее, я хочу, чтобы div # b все еще был отключен внешним переполнением div: hidden.

Каков наилучший способ достичь этого?

Ответ 1

Метод 1

Хороший способ сделать это - установить переполняющий элемент на position:fixed (который заставит его игнорировать родительское переполнение), а затем поместить его относительно родителя с помощью этой техники:

.parent {
   position: relative;      
   .fixed-wrapper {
       position: absolute;         
       .fixed {
           position: fixed;
       }
   }
}

Одно из предостережений заключается в том, что у вас не может быть никаких верхних, правых, левых, нижних свойств, установленных на фиксированном элементе (все они должны быть по умолчанию "авто" ). Если вам нужно слегка отрегулировать позицию, вы можете сделать это, используя положительные/отрицательные поля.

Метод 2

Еще один трюк, который я недавно обнаружил, заключается в том, чтобы сохранить элемент overflow:hidden с помощью position:static и поместить переопределяющий элемент относительно более высокого родителя (а не родителя overflow:hidden). Например:

http://jsfiddle.net/kv0bLpw8/

Ответ 2

CSS

<style type="text/css">
#wrapper {
    width: 400px;
    height: 50px;
    position: relative;
    z-index: 1000;
    left: 0px;
    top: 0px;
}

#wrapper #insideDiv {
    width: 400px;
    height: 50px;
    overflow: hidden;
    position: absolute;
    z-index: 2000;
    left: 0px;
    top: 0px;
}

#wrapper #a {
    position: absolute;
    height: 30px;
    width: 100px;
    bottom: -40px;
    z-index: 1000;
    left: 0px;
}
</style>

HTML

<div id="wrapper">
  <div id="a">AAA</div>
  <div id="insideDiv">
    <div id="b">BBB</div>
  </div>
</div>

Ответ 3

как говорят люди, элемент должен быть представлен вне родителя, чтобы его не обрезали. Но вы можете сделать это с помощью JavaScript, чтобы достичь аналогичной концепции, не изменяя фактическую разметку:

function breakOverflow(elm) {
   var top = elm.offset().top;
   var left = elm.offset().left;
   elm.appendTo($('body'));
   elm.css({
      position: 'absolute',
      left: left+'px',
      top: top+'px',
      bottom: 'auto',
      right: 'auto',
      'z-index': 10000
   });
}

затем передайте элемент, который вы хотите исключить, из обрезки его родителя:

breakOverflow($('#exlude-me'));