HTML的相对位置和绝对位置

2024-05-03 20:53:44

相对定位：该元素相对于自己原有位置，偏移一定距离。相对的是自己。

绝对定位：该元素相对于其父元素，偏移一定距离。相对的是父元素，重点是这个父元素也需要是设置了position属性。从最近的父元素开始找，直到找到body位置为止。

1）相对定位

<div id="test">
<p class="p1">相对定位：相对于自己原来的位置，偏移一些距离</p>
<p class="p2">相对定位,相对的是自己</p>
</div>

对应的css样式：

#test{
height: 300px;
width: 300px;
background: gray;
}

/*p标签本身会有padding和margin值*/
p{
margin: 0px;
padding: 0px;
}

.p1{
height: 100px;
width: 100px;
background: blue;
}

.p2{
height: 80px;
width: 80px;
background: red;
}

运行后效果是：(这时没有设置position属性呢)

然后，给p1设置相对定位

.p1{
height: 100px;
width: 100px;
background: blue;
/*设置相对定位*/
position: relative;
/*相对于左边偏移20px,相对于上边偏移20px*/
left: 20px;
top:20px;
}

运行效果如下：

ok了，相对定位就是这样啦，需要注意的是，p1虽然偏移了，但是同时它还占着它原来的位置。

2）绝对定位

再增加一個div

<body>
<div id="test">
<p class="p1">相对定位：相对于自己原来的位置，偏移一些距离</p>
<p class="p2">相对定位,相对的是自己</p>
</div>

<div id="test2">
<p class="p3">绝对定位：相对于自己父元素的位置，偏移一些距离</p>
<p class="p4">绝对定位,相对的是父元素</p>
</div>
</body>

相应的样式

#test2{
height: 300px;
width: 300px;
background: pink;
}

.p3{
height: 100px;
width: 100px;
background: green;
}

.p4{
height: 90px;
width: 90px;
background: gold;
}

同時將p1的相对定位去掉。这时候效果如下：

然後給p3設置绝对定位：

.p3{
height: 100px;
width: 100px;
background: green;
/*設置绝对定位*/
position: absolute;
left: 30px;
top: 30px;
}

.p4{
height: 90px;
width: 90px;
background: gold;
}

觉得效果是怎樣呢？因爲test2是p3的父元素，所以猜測效果是p3相对于test2，向左偏移30px，向下偏移30px。那麽究竟是不是這樣呢？？运行后效果如下：

我擦，跟想的不一樣啊。。。

別急，这是因为：虽然test2是p3的父元素，但是test2沒有設置position屬性，所以p3就會繼續向上找，找test2的父元素，直至到body为止。所以就出現了如上效果。那麽，如果想p3相对于test2，向左偏移30px，向下偏移30px，只需給test2設置position屬性即可。

#test2{
height: 300px;
width: 300px;
background: pink;
position: relative;
}

运行效果如下：

ok啦，這就是绝对定位。相对的是父元素。

需要注意的是：绝对定位的元素不占原來的位置，這就是p4移動到test2左上角的原因。

---------------------
作者：唐人小调
来源：CSDN
原文：https://blog.csdn.net/gengbaolong/article/details/71023598
版权声明：本文为博主原创文章，转载请附上博文链接！

HTML的相对位置和绝对位置相关推荐

R语言str_sub函数从字符串中提取或替换子字符串（substring）：str_sub函数指定起始位置和终止位置抽取子字符、str_sub函数指定起始位置和终止位置替换子字符串
R语言str_sub函数从字符串中提取或替换子字符串(substring):str_sub函数指定起始位置和终止位置抽取子字符.str_sub函数指定起始位置和终止位置替换子字符串目录
Transformer升级之路：二维位置的旋转式位置编码
©PaperWeekly 原创 · 作者 | 苏剑林单位 | 追一科技研究方向 | NLP.神经网络在之前的文章 Transformer 升级之路:博采众长的旋转式位置编码中我们提出了旋转式位置 ...
手机模拟位置实现精准位置营销效果分析
对微商来说,实现位置精准营销实在太重要的一个推广方法了,位置精准营销能让你的产品展示到全世界的人身边,大大增加产品的曝光度,同时也能打造好友数量,做圈内营销,这里分享一种我们经常在用的位置精准营销方法 ...
WPF 获取鼠标屏幕位置、窗口位置、控件位置
原文:WPF 获取鼠标屏幕位置.窗口位置.控件位置 public struct POINT{public int X;public int Y;public POINT(int x, int y){t ...
positional encoding位置编码详解：绝对位置与相对位置编码对比
目录前言 Why What 绝对位置编码相对位置编码 Sinusoidal Position Encoding Complex embedding How 前言相信熟悉BERT的小伙伴对posi ...
关于 OneNote 无法打开笔记本无法打开该位置没有该位置权限：
问题: 无法打开笔记本(别人共享的) 备注:问题开始之前请刷新一下DNS缓存 https://blog.csdn.net/ljason1993/article/details/83040313 (看 ...
uniapp打开地图选择位置（查看位置）详解
开发小程序的时候,有时候要做打开地图选择位置和打开地图查看当前位置.我前段时间刚做的时候也是一脸懵逼(新手上路). 我是用的uniapp做的,配置方法和原生小程序的配置方法不太一样.下面就是我写的配置 ...
Qt鼠标相对位置、绝对位置、窗口位置、控件位置、控件大小、控件绝对位置
目录坐标系鼠标位置控件位置控件的相对位置控件绝对位置控件的大小,rect 窗口位置窗口的大小窗口绝对位置窗口相对位置总结在Qt界面开发时,有时需要根据鼠标位置,控件位置来确定 ...
Axure中绝对位置与相对位置的区别
Axure中绝对位置与相对位置的区别 1.绝对位置(move to) 根据面板原点(0,0)的坐标作为参考系. 2.相对位置(move by) 根据所需要移动控件(或动态面板)的坐标作为参考系
[R语言]1. R语言中R包下载存储位置和安装位置
开发环境:Win7+R3.6.2+RStudio R语言学习中R包的安装必不可少,可能很多人都没有深究R包是怎么安装的,只是用install.packages("xx包名")命令来 ...

最新文章

热门文章