CSS中的position属性（定位）

来源：互联网发布：北京游戏编程培训编辑：程序博客网时间：2024/05/14 23:31

1、属性的定义

relative: 位置被设置为 relative（相对定位）的元素，可将其移至相对于其正常位置的地方，因此 "left:20px" 会将元素移至元素正常位置左边 20 个像素的位置。

absolute：位置设置为 absolute （绝对定位）的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。

fixed: 位置被设置为 fixed（固定定位）的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。

2、技巧：

relative：用这个属性最好先不定位，先找到其正常该出现的位置，再定位！

absolute：

a、看包含它的元素有没有定位，如果没有定位则按照body来定位；如果包含它的元素(div)已经定位，则按照该元素(div)来进行定位。

b、默认大小是被其内容(或其包含的元素撑大)

以下附上自己的实验代码，以供参考！！

（按照标注的步骤解开相应的代码，并注释其他步骤的代码）

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>relative属性的实例</title><style type="text/css">/*第一步*//*div#div2 {border: 1px solid red;}*//*第二步*//*div#div2 {position: relative;top: 10px;left: 100px;border: 1px solid red;}*//*第三步*//*div#div0{position: relative;top: 10px;left: 100px;border: 1px solid blue;}*//*第四步*//*div#div2 {border: 1px solid red;}div#div0{position: relative;top: 10px;left: 100px;border: 1px solid blue;}*//*第五步*/div#div2 {position: relative;top: 10px;left: 100px;border: 1px solid red;}div#div0{position: relative;top: 10px;left: 100px;border: 1px solid blue;}</style></head><body><div id="div0"><div id="div1">123123</div><div id="div2">asdasd</div></div></body></html>

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>absolute属性的实例</title><style type="text/css">/*第一步*//*div#div2 {border: 1px solid red;}*//*第二步*//*div#div2 {position: absolute;top: 10px;left: 100px;border: 1px solid red;}*//*第三步*//*div#div2 {position: absolute;top: 10px;left: 100px;border: 1px solid red;}*//*第四步*//*div#div0{position: absolute;top: 10px;left: 100px;border: 1px solid blue;}*//*第五步*//*div#div2 {border: 1px solid red;}div#div0{position: absolute;top: 10px;left: 100px;border: 1px solid blue;}*//*第六步*/div#div2 {position: absolute;top: 10px;left: 100px;border: 1px solid red;}div#div0{position: absolute;top: 10px;left: 100px;border: 1px solid blue;}</style></head><body><!--第三步--><div>12312312313</div><div id="div0"><div id="div1">123123</div><div id="div2">asdasd</div></div></body></html>

阅读全文

1 0