Почему "overflow-y: hidden" влияет на видимость элементов, переполненных на оси x?

Рассмотрим следующий пример:

HTML

<div id="test">
    <img src="http://ycombinator.com/images/y18.gif" />
</div>

CSS

#test {
    position:relative;
    margin-left:50px;
    margin-top:50px;
    border:1px solid black;
    height:50px;
    width:50px;
    overflow-x:visible;
    overflow-y:hidden;
}
img {
    position:absolute;
    left:-11px;
}

Я ожидаю увидеть это:

Но я получаю это:

Кажется, что свойство overflow-x переопределяется здесь. Это то, что на самом деле происходит? Предполагая, что я должен держать переполнение-y установленным в скрытое, существует ли способ этого поведения?

Ответ 1

overflow предназначен для использования с элементами, которые не расположены абсолютно. Если вы хотите обработать отсечение абсолютно позиционированного элемента, используйте свойство clip css. Таким образом, чтобы закрепить снизу и сверху вашего содержащего div, но не влево или вправо, сделайте следующее:

#test {
    position:relative;
    margin-left:50px;
    margin-top:50px;
    border:1px solid black;
    height:50px;
    width:50px;
    clip: rect(auto,auto,auto,-11px);
}

Пример: http://jsfiddle.net/treeface/UJNcf/6/

Ответ 2

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

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

Из этого видно, что некоторые комбинации overflow-x и overflow-y недействительны, и иногда один будет переопределять другой, что объясняет, что вы видите здесь. Хотя я не уверен, поскольку формулировка немного неясна, и способы, которыми фактически реализуют браузеры, могут отличаться от спецификации (особенно когда ее трудно расшифровать).