當overflow-x和overflow-y其中一個設置為visible時，如果另一個不是visible，那么它會被自動重置為auto
看看效果先：
第一次遇到這個問題時，我還以為是chrome的一個bug，結果測試了一下，所有瀏覽器都是這樣的，
看一下效果
.div1 { width: 100px; height: 100px; background: #eee; position: relative; overflow-x: hidden; overflow-y: visible;
} .div2 { width: 100px; height: 100px; background: #f00; position: absolute; left: 50px; top: 50px;
} <div class="div1"> <div class="div2"></div> </div>
理想中的效果是
但是結果卻是
我只能說，這太不合理了，對於這個問題，w3c規范是這么說的
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.
翻譯過來就是：
overflow-x和overflow-y的計算值跟給定的值相同，除了某些跟'visible'值的不合理組合：如果一個其中一個屬性的值被賦為'visible'，而另一個被賦值為'scroll'或'auto'，那么'visible'會被重置為'auto'。overflow的計算值與overflow-x相等（如果overflow-y相同的話）；否則就是一對overflow-x和overflow-y的計算值
其實另一個值設置為hidden的時候，visible也會被重置為auto
查了很久，就是不知道當一個屬性設置為visible的時候，另一個設置為scroll這些值有啥不合理的地方
今天是2014-4-2，我覺得我知道為啥它會不合理了
咱們都知道overflow的非visible值會使一個塊級元素形成一個bfc（塊級格式化上下文）
overflow-x設置為visible，overflow-y設置為非visible，那究竟是觸發bfc還是不觸發bfc呢？此處沖突，所以充值了overflow-x，使其成為一個bfc
計算值，應該不僅僅是overflow的值，還包括一些附帶屬性，比如此處是否生成一個bfc
參考資料：
https://developer.mozilla.org/zh-CN/docs/CSS/overflow-x