定位上下文(补充css的position属性)
2024-09-05 08:49:45
】把元素的position属性设定为relative、absolute或fixed后,继而可以使用TRBL属性,相对于另一个元素移动该元素的位置。这里的“另一个元素”,就是该元素的定位上下文。
绝对定位元素的默认上下文是body。然而绝对定位元素的任何祖先元素都可以成为它的定位上下文,只要把相应的祖先元素的position设定为relative即可。
<body> <div id="outer"> <div id="inner">这是一个测试文档,测试定位上下文,定位属性和属性操作</div> </div> </body>
div#outer{width:250px; margin:50px 40px; border-top:3px solid red;} div#inner{top:10px; left:20px; background:#ccc;}
显示结果如图:
代码里给内部div设定了top和left属性,但是内部div并没有相对外部div向下移动10像素,向右移动20像素。原因在于内外部div默认都是静态定位,它们之间不存在谁是谁的定位上下文这个问题。换句话说,在常规文档流中,由于外部div没有内容,内部div就会跟它共享相同的起点。只有将position属性设定为relative、absolute或fixed,这个元素的TRBL属性才会起作用。
这时给内部设定为绝对定位:
div#outer{width:250px; margin:50px 40px; border-top:3px solid red;} div#inner{top:10px; left:20px; background:#ccc;position:absolute;}
这时效果如图
由于没有相对定位的祖先元素供其参照,内部div只能以默认的定位上下文body作为参照,相对于它定位。此时,内部div完全无视其父元素的存在,TL属性会相对于body元素向下、向左偏移其位置。
这时如果把外部div的position属性设定为relative。
div#outer{width:250px; margin:50px 40px; border-top:3px solid red;position:relative;} div#inner{top:10px; left:20px; background:#ccc;position:absolute;}
绝对定位的上下文就变成了外部div,这时效果如下图所示:
最新文章
- TaintDroid剖析之DVM变量级污点跟踪(下篇)
- Openstack+Kubernetes+Docker微服务实践之路--弹性扩容
- JAVA中的注解小结
- 使django与数据库保持长连接
- 结合源代码详解android消息模型
- C语言 读取文件中特定数据
- SQL Server中查询结果拼接遇到的小问题
- java--关键字和保留字
- ruby将mysql查询到的数据保存到excel
- java log4j基本配置及日志级别配置详解
- CodeForces615A-Bulbs-模拟
- ajax基础知识
- 剑指Offer 56. 删除链表中重复的结点 (链表)
- Linux常用指令之一
- Mysql报Cannot load from mysql.proc. The table is probably corrupted
- [ssh]如何设计ARM板上多用户key登录系统
- php判断正常访问和外部访问
- 学习MongoDB 八: MongoDB索引(索引限制条件)(二)
- java获取weblogic应用运行路径
- TF卡.之前的(20180923)