div位于父容器底部

来源:互联网 发布:pc安装mac os x10.12 编辑:程序博客网 时间:2024/05/01 01:31

  先上效果图,重点是父容器设置position属性为relative,子div的position设置为absolute,如果父容器没有设置relative属性,子div会相对于页面的底部

  
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>例子</title><style type="text/css">html{width: 100%;height: 100%;}*{margin: 0;padding: 0;}body{width: 100%;height: 100%;}.parent{position: relative;top: 20%;height: 300px;width: 300px;margin:0 auto;border: 1px solid #000000;}.child{z-index: 99;position: absolute;bottom: 0;width: 100%;height: 80px;background: #000000;}</style></head><body><div class="parent"><div class="child"></div></div></body></html>


0 0
原创粉丝点击