position定位元素解读
来源:互联网 发布:网络加速的原理 编辑:程序博客网 时间:2024/06/06 19:57
转自王福朋的博客http://www.cnblogs.com/wangfupeng1988/p/4322680.html。
查资料可知道,position一共有四个可选属性:static/relative/absolute/fixed。其中static(静态定位)是默认值,即所有的元素如果不设置其他的position值,它的position值就是static,有它跟没有它一样。就不多介绍了。
1 relative的定位
relative元素的定位永远是相对于元素自身位置的,和其他元素没关系,也不会影响其他元素。
2 fixed的定位
fixed元素的定位永远是相对于浏览器边界的,和其他元素没有关系。但是它具有破坏性,会导致其他元素位置的变化。
3 absolute的定位
absolute的定位相对于前两者要复杂许多。如果为absolute设置了top、left,浏览器会根据什么去确定它的纵向和横向的偏移量呢?答案是浏览器会递归查找该元素的所有父元素,如果找到一个设置了position:relative/absolute/fixed的元素,就以该元素为基准定位,如果没找到,就以浏览器边界定位。如下两个图所示:
上图中的“某一层祖先元素”就是该absolute元素的定位上下文。讲到这里,我们上文中的那个图,大家能看明白了吧?还有不明白的可以留言给我。
0 0
- position定位元素解读
- position定位解读
- CSS元素之position 定位
- css 中的元素定位 (position 元素)
- css定位之position详细解读
- CSS元素的定位属性position
- position属性之相对父元素定位
- CSS的定位元素position用法
- CSS:元素定位之position属性
- 元素定位(position属性值)有哪些?
- 盒模型+float浮动元素+position定位
- CSS的Position元素定位和Display元素
- Css 详细解读定位属性 position 以及参数
- CSS 详细解读定位属性 position 以及参数
- CSS项目技巧:固定元素在顶部以及position解读
- IE6/7下绝对定位(position:absolute)元素消失
- 浅析CSS——元素重叠及position定位…
- z-index使用详解元素重叠及position定位
- 纪律
- android wifi组播发送开发日常问题汇总
- Openstack Horizon开发资料与案例
- 加载缩略图类
- 移动端报表JS开发示例
- position定位元素解读
- 人类面对问题时的盲目
- NUMA node
- Mysql Load操作
- 4.3.3.3 master_status_event函数:父进程读status_fd管道,更新其记录的子进程状态
- PowerDesigner(八)-面向对象模型(用例图,序列图,类图,生成Java源代码及Java源代码生成类图)
- sed命令详解
- C++指针与引用的区别
- 蓝桥杯b组c++.9.交换杯子