溢出屬性與-x：隱藏;和-y：可見的

元素的左側和右側不可能爲overflow:hidden，頂部和底部爲overflow-visible？溢出屬性與-x：隱藏;和-y：可見的

一旦我將hidden添加到溢出屬性中，它們都會從外部容器中切斷。

我想這一點，但沒有運氣：http://jsfiddle.net/dmGXY/

<div id="outer" style="overflow-x:hidden;overflow-y:visible;"> 
    <div id="left"></div> 
    <div id="top"></div> 
</div> 
<style> 
#left,#top { 
    position:absolute; 
    border:solid black 2px; 
    width:100px; 
    height:100px; 
} 
#left { 
    margin-left:-30px; 
} 
#top { 
    margin-left:100px; 
    margin-top:-30px; 
} 
#outer { 
    position:absolute; 
    top:70px; 
    left:100px; 
    width:300px; 
    height:200px; 
    border:solid 2px red; 
} 
</style>

來源

2013-02-20 d-_-b

相關：http://stackoverflow.com/questions/1043 6452/overflow-x-hidden-also-hides-vertical-content-too – 2013-02-20 05:20:30

也相關：http://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causes -scroll-bar – 2013-02-20 08:47:57

@JamesDonnelly＆JuanGuerrero謝謝！ – 2013-02-22 06:33:24

你不能隱藏一個和顯示其他但是你可以使用另一個容器中，作爲「面具」來達到同樣的效果

<div id="outer"> 
    <div id="inner"> 
     <div id="left"></div> 
     <div id="top"></div> 
    </div> 
</div> 

#left,#top { 
    position:absolute; 
    border:solid black 2px; 
    width:100px; 
    height:100px; 
} 
#left { 
    margin-left:-30px; 
} 
#top { 
    margin-left:100px; 
    margin-top:-30px; 
} 
#inner { 
    position:absolute; 
    top:70px; 
    left:0; 
    width:300px; 
    height:200px; 
    border:solid 2px red; 
} 
#outer { 
    position:absolute; 
    top:0; 
    left:100px; 
    width:304px; 
    height:100%; 
    border:solid 2px green; 
    overflow: hidden; 
}

您可以在這裏看到的輸出： http://jsfiddle.net/LB2bg/

來源

2013-02-20 14:29:51 David

溢出屬性與-x：隱藏;和-y：可見的

回答

相關問題