作业帮我要用CSS布局,请问绝对定位的坐标改怎么计算.可以举个例子说明下吗?
来源：学生作业帮助网 编辑：作业帮 时间：2024/04/25 20:56:55
我要用CSS布局,请问绝对定位的坐标改怎么计算.可以举个例子说明下吗?
我要用CSS布局,请问绝对定位的坐标改怎么计算.可以举个例子说明下吗?
我要用CSS布局,请问绝对定位的坐标改怎么计算.可以举个例子说明下吗?
唉,乱七八糟.忍不了了!
我先给你按照我的理解说下,然后给你网站去理解吧,我也是从哪里理解的!
文档流的几种：
1.正常文档流.
2.浮动文档流.
3.定位的文档流.
其中你问的是定位.
定位又分为2中：
相对很绝对.
相对定位的文档流,保持占位,仍占据原来正常文档流的位置.在此基础上进行的
left:100px; top:100px; //一个表示从原来的占位点,向右、下各平移100PX.
绝对定位会脱离文档流,也就是出现了层叠覆盖的情况.
left:100px; top:100px; 它究竟跑哪里了呢?
这个坐标是以最近定位父元素为参考点的.
知道了这点你就可以计算了.
一般你需要先设置一个相对定位元素,然后在其里面定位绝对定位,这是最常见的!
几个例子：
<div style="width:100px; height:100px; background-color:#c00;">
<p style="width:50px; height:50px;">
<span style="position:absolute;left:0; top:0; display:inline-block; width:10px; height:10px;">我绝对定位了</span>
</p>
</div>
这个运行后
没有遇到已定位的父元素,于是BODY作为参照.
<div style="width:100px; height:100px; background-color:#c00;">
<p style="width:50px; height:50px; background-color:yellow; position:relative">
<span style="position:absolute;left:0; bottom:0; display:inline-block; width:10px; height:10px; background-color:blue;"></span>
</p>
</div>
这个例子你自己运行吧.
还有：
<div style="width:100px; height:100px; background-color:#c00;position:relative">
<p style="width:50px; height:50px; background-color:yellow; ">
<span style="position:absolute;left:0; bottom:0; display:inline-block; width:10px; height:10px; background-color:blue;"></span>
</p>
</div>