1. 外层是relative, absolute是,相对于relative, absolute定位。
2. 外层没有relative时,相对于body定位。
然后图片占满一屏的原因是宽度:100%造成的。
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{ margin:0; padding:0;}
.bottom{ height:40px;background: #f00; position:absolute; bottom:0; z-index:10;width: 100%;}
</style>
</head>
<body>
<img src="https://img-blog.csdn.net/20140808095811890?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemNoY29kZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" width="100%" />
<div class="bottom"></div>
</body>
</html>
如果把宽度去了,就占不了一屏了。
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{ margin:0; padding:0;}
.bottom{ height:40px;background: #f00; position:absolute; bottom:0; z-index:10;width: 100%;}
</style>
</head>
<body>
<img src="https://img-blog.csdn.net/20140808095811890?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemNoY29kZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />
<div class="bottom"></div>
</body>
</html>