position absolute element visible inside overflow:hidden element
I need to have elements positioned absolute inside a div with overflow hidden, however these elements with position absolute are visible outside the boundaries of the div with overflow hidden, I would need them not to be visible at all. See code: http://jsfiddle.net/xEYJc/
The idea is:
when you hover on one 'li' it will slide in (inside an iPhone frame) the respective picture
this the CSS for each image
.first .search{
position: absolute;
width: 229px;
margin: 94px 60px 40px -280px;
-webkit-transition:margin-left 0.3s ease-out;
-webkit-transition-delay:0.2s;
}
and this is the CSS for the container:
.iPhoneWrapper div{
overflow-x: hidden;
margin-left: 17px;
}
As it stands the '.search' positioned absolute is visible outside the 'div' with overflow hidden and I need them to be hidden and only visible when sliding in.
The solution is simple:
add position: relative and overflow: hidden to your class .iPhoneWrapper , modified fiddle: http://jsfiddle.net/xEYJc/1/
上一篇: iOS应用中的标题从中心向左移动