CSS学习笔记----position简单举例

来源：互联网发布：照片审核工具 mac 编辑：程序博客网时间：2024/05/17 01:23

<html><head><title>定位问题</title></head><style type="text/css">/*position用来表示定位信息，默认为static，不表示任何方式，只是遵从html规定，常用的有两个值：absolute（绝对）和relative（相对）；relative的top等值的设定是相对于父类容器，而absolute则是相对于上一级position的值为absolute的父类容器，如果没有则默认为body。 另外，absolute不会占用父类的空间，而relative则不论子容器当时的位置如何，都会占用父类的空间*/#parent{border:4px solid red;width:400px;height:400px;margin-top:100px;margin-left:100px;}#c1{border:2px solid blue;width:200px;height:200px;position:absolute;top:20px;left:20px;}#c2{border:2px solid orange;width:200px;height:200px;}#feng{margin:30px;}#feng li {border:5px solid blue;text-align:center;width:200px;height:40px;list-style:none;}/*一般会在li中加span来放置文本，然后通过在span中设置position来控制文本位置*/#feng li span{position:relative;top:10px;}</style><body><div id="parent"><div id="c1">snake001</div><div id="c2">snake002</div></div><ul id="feng"><li><span>白日放歌须纵酒</span></li><li><span>白日放歌须纵酒</span></li><li><span>白日放歌须纵酒</span></li><li><span>白日放歌须纵酒</span></li></ul></body></html>

0 0