CSS定位初步
本帖最后由 马黑黑 于 2021-12-20 18:10 编辑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 个像素；若需要往右移、往下移，数值用正数而不是负数。
本帖最后由 马黑黑 于 2021-12-20 18:13 编辑 <br /><br /><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>
<p>例子演示在此楼。请观察例一和例二的位置，其中，例一跑到左上角去了，去找找</p> 有趣，用这两个定位方式，可以把展示效果扔到任何一个地方去了{:4_173:} “当我们用 relative 对对象进行定位，则被定位的对象以它自己原来位置为基准，按 left 和 top 值相对地往水平方向和垂直方向移动N多个像素。”
绝对定位好理解，相对定位的这个“自己原来位置”到底是在哪的？
<div style="position:relative;top:-100px;left:-100px;width:300px;background:#ffdd00;">看看这一楼的“自己原来位置”在哪</div> 看起来是相对于自己写字的位置。
来试试上下在0位置的相对定位，top0 left 100的
<div style="position:relative;top:0px;left:100px;width:300px;background:#ffdd00;">再换位置试试</div> 嗯嗯，现在明白了。谢谢黑黑{:4_187:} 红影 发表于 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位移到了售票窗前 ...
嗯嗯，刚才试验了几个，对这点已经弄明白了{:4_173:} 红影 发表于 2021-12-20 19:45
嗯嗯，刚才试验了几个，对这点已经弄明白了
甚好甚好 学习中~~~~~~~~~~~~ 加林森 发表于 2021-12-20 19:49
学习中~~~~~~~~~~~~
{:4_180:} 马黑黑 发表于 2021-12-20 19:49
{:4_191:}敬你！ 加林森 发表于 2021-12-20 19:51
敬你！
蟹蟹 马黑黑 发表于 2021-12-20 19:46
甚好甚好
现在对这个两个命令已经清楚了，谢谢黑黑{:4_187:} 红影 发表于 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
必须的
客气了