前言

定位+位移是前期学习的重要知识点之一

一、相对和绝对定位是什么？

定位是用position属性进行固定元素在浏览器中的位置的一种方法。

二、怎么使用？

定位一般position：relative；position：absoulte；用配合top、left、right、bottom进行位移

三、relative和absoulte的区别？

1.relative是相对于自己现在的位置进行定位如果元素用了position：relative；那么用top、left、right、bottom这些属性位移时，就是以自己现在的位置为参考进行位移。不脱离文档流

例子：

 <style>.box{width: 500px;height: 500px;position: relative;/*相对定位*/margin: 50px auto; background-color: brown;top: 100px;   /*位移属性*/}</style><div class="box"></div>

box会以原来所在的位置向下移动100px；

2.absoult是相对于用了position：relative；的父盒子的位置进行位移的，脱离文档流。写了position：absoulte；之后：

1）.如果该元素没有父盒子，会默认出现在html的左上角；此时使用位移属性进行位移，它是以body为参考进行位移，

如：top：50px；right：50px；它会出现在浏览器离顶部50px、左边50px。

2）.如果该元素有父盒子并且该元素在父盒子中前面没有其他元素，它会出现在盒子的左上角。

如果父盒子写了position：relative；该元素会以父元素为参考进行位移，效果如上面body和box的关系所示。

如果父盒子没写position：relative；它会找父元素上一个有position：relative；的容器进行参考，如果还是没有，则以body为参考。

3）.如果该元素在父盒子中前面有其他元素，则会出现在下面一行并居左。

3. 看了上面的介绍相信大家都知道者两个值的效果了吧。

一般父元素用相对定位position：relative；子元素用绝对定位position：absoulte；

口诀：父相子绝。

注意：子元素要用position：absoulte；进行位移，父元素一定要写position：relative；要不然子元素就会不知道跟着哪个容器跑路了！

总结

relative和absoulte者两个值在前期布局非常重要，一般都是连用的。前期布局最好每个大盒子都写一个position：relative；方便里面容器排布。记住：父相子绝！

相对定位和绝对定位的用法相关推荐

关于绝对定位与相对定位的区别和用法
Hello大家好,我们这次来详细说下关于绝对定位以及相对定位的知识. 相对定位及其用法顾名思义相对定位的意思是相对于该控件相对于之前的位置进行偏.相对定位的css样式代码是这样的:position: ...
WEB学习 -相对定位、绝对定位、固定定位、z-index
相对定位相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置调整. 2.不脱标,老家留坑,形影分离也就是说相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘.3.相对定位用途 ...
[css] 说说你对相对定位、绝对定位、固定定位的理解
[css] 说说你对相对定位.绝对定位.固定定位的理解 position 属性指定了元素的定位类型.position 属性的五个值:static(默认值) relative(相对定位) fixed(固 ...
详解CSS的相对定位和绝对定位
CSS的相对定位和绝对定位一.Static 静态定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,这个时候你给这个元素设置的left,r ...
css中相对定位和绝对定位
css中相对定位和绝对定位定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现 ...
html相对定位不占位置,CSS position 相对定位和绝对定位
一.position 的四个值:static.relative.absolute.fixed. 绝对定位:absolute 和 fixed 统称为绝对定位相对定位:relative 默认值:stat ...
一、CSS定位布局[相对定位、绝对定位、固定定位]
一.CSS定位布局选项说明 static 默认形为,属于文档流 relative 相对定位 absolute 绝对定位 fixed 固定定位 1.relative 解释:元素在原来的位置开始移动( ...
html css x y相对定位坐标,【HTML+CSS】浅谈：相对定位与绝对定位
相对定位和绝对定位 ·定位标签:position ·包括属性:relative(相对) absolute(绝对) 1.position:relative; 假设对一个元素进行相对定位.首先它将出如今它 ...
HTML:相对定位和绝对定位
相信大家一直对前端中的相对定位和绝对定位有些模糊的概论,现在鼠光给大家讲解一下绝对定位:position:obsolute <p style="position:obsolute&q ...

相对定位和绝对定位的用法

前言

一、相对和绝对定位是什么？

二、怎么使用？

三、relative和absoulte的区别？

总结

相对定位和绝对定位的用法相关推荐

最新文章

热门文章