<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>超越overflow</title>
<style>
body {
background-color: #bbb;
}
.scroll {
width: 500px; height: 300px;
margin: 200px auto 0;
margin-top: -webkit-calc(50vh - 150px);
margin-top: calc(50vh - 150px);
border: 1px solid #ccc;
border-radius: 3px;
box-shadow: 0 0 3px rgba(0,0,0,.35);
background-color: #fff;
overflow: auto;
}
.close {
position: absolute;
width: 34px; height: 34px;
margin: -17px 0 0 483px;
background: url(http://img1.sycdn.imooc.com//5444835b000100ce00340075.png) no-repeat;
}
.close:hover {
background-position: 0 -41px;
}
img {
display: block;
margin: 10px;
}
</style>
</head>
<body>
<div class="scroll">
<a href="javascript:" class="close" title="关闭"></a>
<img src="http://img1.sycdn.imooc.com//54447b06000171a002560191.jpg">
<img src="http://img1.sycdn.imooc.com//54447f550001ccb002560191.jpg">
</div>
</body>
</html>
