CSS定位初步

马黑黑

CSS样式的 position 属性用于对网页对象进行定位，它可以用两个值， absolute（绝对定位）和 relative（相对定位）。position 这个对象定位属性很多做音画帖的坛友都在使用，因为论坛程序前端页面装载帖子的容器宽度有限，只能通过定位将音画帖的左边（left）左移从而突破父容器的宽度限制；其实现原理是通过设置 left 值即左边起始位置值和 top 值即顶端起始位置值来冲破父容器的左右和上下边界，结果是帖子的宽度大于装载它的父容器的宽度，高度则不受限制。  
  
语法：style="position:值; top:值; left:值;"

说明：

① position 定义对象定位方式，值有两个可选，absolute 和 relative，前者表示绝对定位，后者表示相对定位；
② top 表示对象顶端起始位置，值一般为多少个像素；left 表示左边起始位置，值同 left 规范。

代码举例（我们设定了对象宽度为300个像素并设置了背景颜色以便测试时观察效果）：

例一：<div style="position:absolute;top:0px;left:0px;width:300px;background:#ffdd00;">这里是绝对定位的DIV标签</div>
例二：<div style="position:relative;top:-100px;left:-100px;width:300px;background:#ffdd00;">这里是相对定位的DIV标签</div>

关于绝对定位：

绝对定位是针对整个页面而言，亦即，当我们用 absolute 定位时，对象位置以整个页面为基准，按 left 和 top 值绝对定位对象于整个页面中。例一中，left 为0表示从最左边开始，top 值为0表示从最顶端开始，结果就是对象出现在页面的左上角。

关于相对定位：

相对定位是针对对象自己而言，就是说，当我们用 relative 对对象进行定位，则被定位的对象以它自己原来位置为基准，按 left 和 top 值相对地往水平方向和垂直方向移动N多个像素。例二中，宽度为300个像素的 DIV 区域在原有位置左移 100 个像素、往上移 100 个像素；若需要往右移、往下移，数值用正数而不是负数。

马黑黑

例一：这里是绝对定位的DIV标签

例二：这里是相对定位的DIV标签

例子演示在此楼。请观察例一和例二的位置，其中，例一跑到左上角去了，去找找

红影

有趣，用这两个定位方式，可以把展示效果扔到任何一个地方去了

红影

“当我们用 relative 对对象进行定位，则被定位的对象以它自己原来位置为基准，按 left 和 top 值相对地往水平方向和垂直方向移动N多个像素。”

绝对定位好理解，相对定位的这个“自己原来位置”到底是在哪的？

红影

看看这一楼的“自己原来位置”在哪

红影

看起来是相对于自己写字的位置。 来试试上下在0位置的相对定位，top0 left 100的

再换位置试试

红影

嗯嗯，现在明白了。谢谢黑黑

马黑黑

红影 发表于 2021-12-20 18:45
“当我们用 relative 对对象进行定位，则被定位的对象以它自己原来位置为基准，按 left 和 top 值相对地往 ...

我举个栗子：排队买票，你站在第N位。这时，你用了一张 relative 定位卡，一下子就从第N位移到了售票窗前买票了。这里，N是你的位置，你原来的位置，以此为基础，relative 定位卡相对于你原来的N位置移动了N个像素直接到了售票窗前面。

就是说，一个 div 也好，一个 p 也好，一个 table 也好，在代码流中它出现的位置对应于网页中的某个位置，比如本回复的第一个字“我”它所在的位置就是对象自己的原有位置。如果我对这个“我”进行相对定位，那么，这个“我”的位置会出现偏移，偏移的依据是 relative 定位时所定义的 top 和 left 值并相对于“我”字没定位前它应在的位置。

红影

马黑黑 发表于 2021-12-20 19:38
我举个栗子：排队买票，你站在第N位。这时，你用了一张 relative 定位卡，一下子就从第N位移到了售票窗前 ...

嗯嗯，刚才试验了几个，对这点已经弄明白了

马黑黑

红影 发表于 2021-12-20 19:45
嗯嗯，刚才试验了几个，对这点已经弄明白了

甚好甚好

加林森

学习中~~~~~~~~~~~~

马黑黑

加林森 发表于 2021-12-20 19:49
学习中~~~~~~~~~~~~

加林森

马黑黑 发表于 2021-12-20 19:49

敬你！

马黑黑

加林森 发表于 2021-12-20 19:51
敬你！

蟹蟹

红影

马黑黑 发表于 2021-12-20 19:46
甚好甚好

现在对这个两个命令已经清楚了，谢谢黑黑

马黑黑

红影 发表于 2021-12-20 19:54
现在对这个两个命令已经清楚了，谢谢黑黑

OK

加林森

马黑黑 发表于 2021-12-20 19:52
蟹蟹

抓走

马黑黑

加林森 发表于 2021-12-20 19:55
抓走

不客气

加林森

马黑黑 发表于 2021-12-20 19:56
不客气

必须的

马黑黑

加林森 发表于 2021-12-20 20:00
必须的

客气了