position:relative的理解

最新推荐文章于 2023-06-04 22:58:06 发布

原创最新推荐文章于 2023-06-04 22:58:06 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

all 专栏收录该内容

204 篇文章

订阅专栏

本文深入解析CSS中相对定位的原理与应用，包括如何使元素相对于自身或父元素移动而不影响整体布局，通过实例演示相对定位如何在网页设计中灵活运用。

备忘吧以前搞样式时候没记住用起来了又得查半天

<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
div.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
div.pos_right
{
position:relative;
left:20px
}
</style>
</head>

<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>

<div id="left1" class="pos_left" style='float:left;width:500px;background-color:blue'>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<div id="pt" class="pos_right">
<p>回到原本</p>
</div>
</div>
<div class="" style='float:left;width:20px;background-color:red'>1
</div>
<div class="" style='float:left;width:20px;background-color:green'>2
</div>
</body>

</html>

position:relative是
1.相对原本自己元素应该在的位置而进行的调整
2.不影响其他元素的布局。

比如上面的例子 left1 整个div向左了，但是其内部的pt又向右了，则pt实际上就在什么样式都不加的原本位子上

接下来我们看1这个div，原本left1占了500px，所以1这个div直接就在500的后面画出来了，但是浏览器根据样式又把left1往左移，1这个div位置又不会跟着变化，所以left1和1之间就会有20px的间隙了

同理2.

可以自行把那两个left的样式加给1或者2 能增加理解

比如
a:给1 pos_left 样式，1就会紧邻left1,2不受影响
b:给1 pos_right, 给2pos_left， 1和2就会调换位置
等等。。