absolute问题

来源：互联网发布：施耐庵子孙哑巴知乎编辑：程序博客网时间：2024/06/16 18:35

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="http://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="http://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>

0 0