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

Question

У меня есть <div>, это некие height и width и overflow:hidden, так что ограниченные внутренние изображения обрезаются; однако я хочу, чтобы одно изображение в <div> выходило из границы (т.е. чтобы переопределить overflow:hidden), как мне это сделать?

Answer 1

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

Answer 2

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

Answer 3

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

#parent { 
    overflow: hidden; 
} 

#parent:hover { 
    overflow: visible; 
} 

Answer 4

Я знаю, что это это старый пост, но это можно сделать (по крайней мере, в 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/

Answer 5

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

<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/

Answer 6

Все приведенные ответы где не удовлетворяющие для меня. Все они хаки, по моему мнению, и сложно реализовать в сложных макетах.

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

После того, как один из родителей имеет определенное переполнение, нет никакого способа, чтобы позволить своим детям переопределить.

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

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

<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/

Answer 7

Хитрость состоит в том, чтобы сохранить элемент overflow:hidden w с 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>

Я также хочу отметить, очень распространенный случай использования для желания иметь переполнение элемент его контейнер таким образом, если вы хотите анимировать высоту выпадающего списка или контейнера от X до 0, и, следовательно, необходимо иметь на контейнере overflow: hidden. Обычно у вас есть что-то внутри контейнер, который вы хотите переполнить независимо. Поскольку эти элементы доступны только тогда, когда контейнер «открыт», вы можете воспользоваться и установить переполнение назад на visibleпосле контейнер полностью открыт, а затем установите его обратно на hidden, прежде чем пытаться анимировать контейнер до height: 0 ,

Answer 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 и, наконец, применить исходное положение и, при необходимости, ширину и высоту.

Answer 9

Оберните overflow: hiddendiv с другим div, который имеет CSS свойство -

transform: translate(0, 0);

и в вашем specefic тег, который вы хотите, чтобы переопределить - overflow: hidden, установите его -

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

ie -

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

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

See the fiddle here

Answer 10

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

ОДНАКО, вместо использования переполнения можно использовать свойство контура, установленное на цвет фона в сочетании с свойством 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>

Answer 11

У меня есть супер-простое решение этой проблемы: Используйте "предварительный" тег. Я знаю, что pre tag является эквивалентом использования «goto» в программировании, но эй: он работает!

<div style="overflow: hidden;"> 
 
    <pre> 
 
    super long text which just goes on and on and on and on and one, etc. 
 
    </pre> 
 
</div>