Разрешить определенному тегу переопределять переполнение: скрытый

Ответ 1

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

.relative-wrap {
    /*relative on second parent*/
    position: relative;
}

.overflow-wrap {
    height: 250px;
    width: 250px;
    overflow: hidden;
    background: lightblue;
    
    /*no relative on immediate parent*/
}

.respect-overflow {
    position: relative;
    top: 75px;
    left: 225px;
    height: 50px;
    width: 50px;
    background: green;    
}
.no-overflow {
    position: absolute;
    top: 150px;
    left: 225px;
    height: 50px;
    width: 50px;
    background: red;
}

<div class="relative-wrap">
    
    <div class="overflow-wrap">
        
        <div class="respect-overflow">
        
        </div>
        <div class="no-overflow">
            
        </div>
        
    </div>
    
</div>

Ответ 2

Я знаю, что это старый пост, но это можно сделать (по крайней мере, в Chrome). Я понял это примерно два года назад, и это спасло меня пару раз.

Установите для ребенка положение фиксированного и используемого полей вместо верхнего и левого положения.

#wrapper {
    width: 5px;
    height: 5px;
    border: 1px solid #000;
    overflow: hidden;
}

#parent {
    position: relative;
}

button {
    position: fixed;
    margin: 10px 0px 0px 30px;
}

Вот пример: http://jsfiddle.net/senica/Cupmb/

Ответ 3

Все ответы на вопросы, которые не удовлетворяют меня. Они, по моему мнению, все хаки и сложны в сложной компоновке.

Итак, вот простое решение:

Как только родитель имеет определенное переполнение, нет способа разрешить его дочерним элементам переопределять это.

Если ребенку необходимо переопределить родительское переполнение, тогда у ребенка может быть другое переполнение, чем у других детей.

Итак определите переполнение для каждого дочернего вместо, объявив его в родительском:

<div class="panel">
    <div class="outer">
        <div class="inner" style="background-color: red;">
            <div>
                title
            </div>

            <div>                     
                some content
            </div>
        </div>    
    </div>  
</div>

.outer {
    position: relative;
    overflow: hidden;
}    

.outer:hover {
    overflow: visible;
}  

.inner:hover {
    position: absolute;
}

Вот скрипка:

http://jsfiddle.net/ryojeg1b/1/

Ответ 4

Вы не можете, если вы не измените свой макет HTML и не переместите это изображение из родительского div. Немного больше контекста поможет вам найти приемлемое решение.

Ответ 5

Вы можете переполнить элемент из погружения, обернув его в другой div, а затем установите свое изображение как позицию: absolute; и смещение с использованием полей.

<div class="no-overflow">
<div>
<img class="escape" src="wherever.jpg" />
</div>
</div>

.no-overflow{
overflow:hidden;
width: 500px
height: 100px
}

.escape{
position: absolute;
margin-bottom: -150px;
}

Пример (протестирован в firefox + IE10) http://jsfiddle.net/Ps76J/

Ответ 6

переполнение относится к контейнеру, который не позволяет отображать негабаритный контент (если он скрыт). Он не имеет ничего общего с внутренними элементами, которые могут иметь переполнение: что угодно, и все еще не будет отображаться.

Ответ 7

Z-index, похоже, не работает, но здесь у меня есть обходное решение, которое отлично работает для меня, поскольку мне нужно переполнение только для того, чтобы быть "видимым" при зависании дочернего элемента:

#parent {
   overflow: hidden;
}

#parent:hover {
   overflow: visible;
}

Ответ 8

Все вышеизложенное хорошо, но ничего не бьет JAVASCRIPT. (Используя jquery). Таким образом,

<script>
var element = $('#myID');
var pos = element.offset();
var height = element.height(); // optional
element.appendTo($('body')); // optional
element.css({
    position : 'fixed'
}).offset(pos).height(height);
</script>

Что я делаю, получить исходную позицию элемента (относительно страницы), необязательно получить высоту или ширину, необязательно добавить элемент в тело, применить новое правило css position : fixed и, наконец, применить оригинал положение и, возможно, ширину и высоту.

Ответ 9

Оберните overflow: hidden div другим div, у которого есть свойство css -

transform: translate(0, 0);

и в вашем специальном теге, чтобы вы его переопределили - overflow: hidden, установите его с помощью

position: fixed; он будет по-прежнему находиться относительно своего родителя

i.e -

.section {
    ...
    transform: translate(0, 0);
}

.not-hidden {
    position: fixed;
    ...
}

Смотрите здесь скрипку

Ответ 10

В настоящее время я не знаю, как сделать родительский node с скрытым переполнением, у него есть дети, видимые за его пределами (за исключением position:fixed children).

ОДНАКО, возможно вместо использования переполнения вы можете просто использовать свойство контура, установленное в цвет фона в сочетании с свойством z-index, чтобы замаскировать некоторые элементы, сохраняя при этом другие.

.persuado-overflow-hidden {
 /*gives the appearance of overflow:hidden*/
  z-index: -100;
  position: relative;
  outline: 1000vw solid white;
  overflow: visible;
}
.overridevisible {
/*takes the element out of the persuado overflow hidden*/
  z-index: 1;
}
/*does the other styling to the text*/
.loremcontainer {
  width: 60vw;
  height: 60vh;
  margin: 20vw;
  border: 1px solid;
}
.loremtxt {
  width: 100vw;
  height: 100vh;
  margin: -20vh;
  z-index: -1;
}
.positionmessage {
  z-index: 100;
  position: absolute;
  top: -12vh;
  left: -5vw;
  right: -5vw;
  color: red;
}

<div class="persuado-overflow-hidden loremcontainer">
<div class="loremtxt">
<div class="overridevisible positionmessage">Then, theres this text outside the paragraphs inside the persuado overflow:hidden element</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porta lorem lorem, eu dapibus libero laoreet et. Fusce finibus, felis ac condimentum commodo, mauris felis dictum sapien, pellentesque tincidunt dui dolor id nulla. Etiam vulputate turpis eu lectus ornare, in condimentum purus feugiat. Donec ultricies lacinia urna, sit amet ultrices magna accumsan ut. Suspendisse potenti. Maecenas nisl nibh, accumsan vel sodales in, rutrum at sem. Suspendisse elit urna, luctus vitae urna ut, convallis ultricies tellus. Ut aliquet auctor neque, nec ullamcorper tortor ullamcorper vitae. Fusce at pharetra ante. Aliquam sollicitudin id ante sit amet sagittis. Suspendisse id neque quis nisi mattis vulputate. Donec sollicitudin pharetra tempus. Integer congue leo mi, et fermentum massa malesuada nec.
</div>
</div>