Может переполниться: скрыто; использоваться, чтобы скрыть не размещенный контент, но все же показывать позиционированный контент? - PullRequest
Новая
       10

Может переполниться: скрыто; использоваться, чтобы скрыть не размещенный контент, но все же показывать позиционированный контент?

0 голосов
/ 25 августа 2011

Прежде всего, взгляните на это: http://jsfiddle.net/Udvgm/

HTML: 

<div id="container">
    <div id="tooWide">
        <p>This is just way too wide! We should clip it.</p>
    </div>
    <div id="relativeParent">
        <div id="absoluteChild">
            <p>text</p>
        </div>
    </div>
</div>
<div id="container2">
    <p>This is some text which should be overlapped.</p>
</div>

CSS: 

#container {
    background: grey;
    width: 450px;
}
#relativeParent{
    height: 40px;
    width: 400px;
    position: relative;
    background: green;
}

#absoluteChild{
    position: absolute;
    width: 100px;
    height: 60px;
    top: 0px;
    left: 10px;
    z-index: 2;
    background: blue;
}
#tooWide {
    background: red;
    width: 600px;
}

Мне интересно, если этовозможно, что синее поле (#absoluteChild) переполнится за пределы серого поля (#container), но переполненные части красного поля (#tooWide) будут скрыты.

Прежде чем вы предложите это, использование overflow: hidden; overflow-y: visible; (или overflow-x: hidden; overflow: visible;) заставит браузер добавить некоторые нежелательные полосы прокрутки.

Ответы [ 2 ]

0 голосов
/ 26 августа 2011

Если у вас есть блок с overflow: hidden и блок с position: absolute внутри него, пока блок с переполнением и все родительские элементы блока с абсолютным позиционированием не получат position: static, блок с абсолютным позиционированием не будет скрыт.

Я не знаю, что вы хотите сделать со своим кодом, но если вы хотите позиционировать какой-то блок из блока с помощью overflow, вы можете переместить контекст позиционирования за пределы блока с помощью overflow, так что абсолютное позиционирование Блок будет виден и может быть расположен вокруг.

Вот скрипка: http://jsfiddle.net/kizu/Udvgm/3/

0 голосов
/ 26 августа 2011

К сожалению, это невозможно в ваших обстоятельствах.

Прежде чем предложить это, используйте overflow: hidden; overflow-y: visible; (или overflow-x: hidden; overflow: visible;) заставляет браузер добавьте несколько нежелательных полос прокрутки.

Из спецификации:

Вычисленные значения overflow-x и overflow-y такие же, как их указанные значения, за исключением того, что некоторые комбинации с visible невозможны: если один указан как visible, а другой scroll или auto, тогда visible устанавливается на auto.

Полезная страница с примерами и более подробным объяснением: http://www.brunildo.org/test/Overflowxy2.html

...