CSS中绝对定位解释
来源:互联网 发布:淘宝客服如何建议 编辑:程序博客网 时间:2024/05/21 18:49
w3school中有这样一句话“绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块”
什么是已定位的祖先元素,经查阅资料及测试,已定位的祖先元素就是有position属性,且position的值为absolute或者relative的父元素。
什么是最初的包含块,即html画布(看起来也就是body区域)。
之前遇到一个问题,两个div嵌套,怎么使第二个div总是在第一个div的底部并且居中?
要在底部就用到了绝对定位,让第一个元素position的值为absolute或者relative,第二个元素的position属性值为absolute,且设置bottom为0px即可。
要居中,我们可以设置left: 50%; margin-left: -第二个div宽度一半px;
最好让第一个元素的postion的值为relative,这样的话,它还占据文档流,如果设置为absolute的话,他就不再占据文档流,对后面的标签的布局将会产生比较大的影响。
示例代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style> .div1{width: 1000px;height: 500px; border: 5px solid red;position: relative; margin: 0 auto; } .div2{width:500px; height: 20px; border: 5px solid red; position: absolute;bottom: 0px; left: 50%; margin-left: -250px; } </style></head><body><div class="div1">测试一下<div class="div2">2222</div></div></body></html>
0 0
- CSS中绝对定位解释
- css中相对定位和绝对定位
- css中绝对定位和相对定位
- css中绝对定位和相对定位
- css中相对定位和绝对定位
- css定位中绝对定位和相对定位的区别
- CSS中绝对定位的特殊性质
- 对css中绝对定位与相对定位的理解
- CSS中关于绝对定位和相对定位
- CSS中相对定位和绝对定位的应用
- CSS样式中 绝对定位和相对定位
- div+css 中相对定位于绝对定位的详解
- CSS中关于定位的问题, 相对,绝对定位
- css中绝对定位与相对定位的区别
- css中绝对定位absolute和相对定位relative
- CSS中相对定位和绝对定位理解
- css中绝对定位和相对定位的理解
- CSS中position绝对定位和相对定位
- Web报表页面如何传递中文参数
- UNIX环境高级编程之第4章:文件和目录-习题
- linux进程间通讯的几种方式的特点和优缺点
- linux下C语言编译为汇编代码
- 如何阅读优秀源代码
- CSS中绝对定位解释
- Spark机器学习——互动出版网
- eclipse + Felix 开发环境搭建 bundle 开发与调试
- c# 连接本地的sdf数据库文件
- ORA-01461: 仅能绑定要插入 LONG 列的 LONG 值
- 协方差矩阵
- nginx部署
- 对象的比较及hashCode、equals方法的使用
- Oracle expdp/impdp导出导入命令及数据库备份(转)