position:absolute相对哪个元素定位
2016-06-01 19:11
405 查看
应用了position: absolute的元素会循着节点树中的父(祖)元素来确定“根”,然后相对这个“根”元素来偏移。如果在其节点树中所有父(祖)元素都没有设置position属性值为relative或者absolute则该元素最终将对body进行位置偏移。应用了position: absolute的元素会脱离页面中的普通流并改变Display属性(重点)!
w3school说:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
也就是说
生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。
元素默认的定位值是static,所以往上找参照元素一直到根元素了。
如果是要相对第一个父元素定位,请为该父元素添加属性position: relative,或者添加position:absolute
示例代码:
或者设置.head-photo的position为absolute
结果都是:
w3school说:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
也就是说
生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。
元素默认的定位值是static,所以往上找参照元素一直到根元素了。
如果是要相对第一个父元素定位,请为该父元素添加属性position: relative,或者添加position:absolute
示例代码:
<html> <head> <style> *{margin:0;border:0;padding:0;} .head-photo { margin-top:100px; margin-left:100px; width:100px; height:120px; border:5px solid green; text-align:center; position:relative; } .head-photo div { position:absolute; top:15px; left:15px; display:block; z-index:10; border:2px solid red; width:50px; height:70px; } </style> </head> <body> <div class='head-photo'> <div></div> </div> </body> </html>
或者设置.head-photo的position为absolute
<html> <head> <style> *{margin:0;border:0;padding:0;} .head-photo { margin-top:100px; margin-left:100px; width:100px; height:120px; border:5px solid green; text-align:center; position:absolute; } .head-photo div { position:absolute; top:15px; left:15px; display:block; z-index:10; border:2px solid red; width:50px; height:70px; } </style> </head> <body> <div class='head-photo'> <div></div> </div> </body> </html>
结果都是:
相关文章推荐
- DLL注入
- 浅谈BFC与应用
- 数据采集器之数据解析
- android多分辨率适配
- Android源码分析之SharedPreferences
- 笔记
- myeclipse优化设置
- $http
- Ubuntu14.04 64位+Python3.4环境下安装opencv3.0的方法
- 6-6 8255并行接口(LED)
- 深入学习java并发编程:内存模型(一)基础
- Android switch button初步了解
- 走向灵活软件之路——面向对象的六大原则
- 【JUC】JUC线程池框架综述
- 统计字符串中的单词数(24)
- 使用IOS企业版证书发布应用
- 实用的 Python —— 使用虚拟环境 virtualenv(Linux)
- 人数不定的工资类
- 如何在Windows7 设置node的环境变量NODE_ENV=production
- webpack+react+es6开发模式