div位于父容器底部
2016-04-14 16:37
211 查看
先上效果图,重点是父容器设置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>
相关文章推荐
- 自定义一个圆圈View
- 循环(5 )
- 欢迎您在新浪博客安家
- JS 获取样式属性
- Springmvc注解优化
- JavaWeb中的Filter
- Android SDK Manager国内无法更新的解决方案(亲测有效)
- 问题:UIButton 添加倒计时功能后会一闪一闪
- Android学习路线指南
- 定时器开启
- Hibernate学习(2)
- iOS抽屉效果
- Request对象
- 淘宝天猫网站停止支持IE6、IE7浏览器,你还在用xp吗?
- spring 事务控制
- vs2010操作office2010
- LeetCode:Convert Sorted List to Binary Search Tree
- UIAlertView' is deprecated: first deprecated in iOS 9.0 - UIAlertView is deprecated. Use UIAlert
- Springmvc注解启用
- Java内部类:概览(一)