Overflow property with -x: hidden; and -y: visible
Can't have left and right side of an element like overflow:hidden
, and top and bottom like overflow-visible
?
As soon as I add hidden
to the overflow property, they will both be detached from the outer container.
I try this but no luck: 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>
+3
source to share
1 answer
You cannot hide it and show another, but you can use a different container as a "mask" to achieve the same effect.
<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;
}
You can see the result here: http://jsfiddle.net/LB2bg/
+1
source to share