超越overflow，CSS深入理解之absolute教程-慕课网

index.html
<!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>
超越overflow

任务
