文章目录

前言一、定位是什么？二、如何开启定位 1.相对定位2.绝对定位总结

前言

随着前端课程的学习，我们从浮动来到了定位，同样都是布局所需要用到的方法，那么有什么区别呢？设置定位又有什么要求呢？设置定位又能对我们写前端样式有什么帮助呢？我整理了部分笔记，一起来看看吧！

一、定位是什么？又有哪些形式？

定位： 是一种高级的布局手段， 你可以将任何元素，摆放在页面的任意位置；

定位又分为 ：相对定位和绝对定位

二、如何开启定位

1.相对定位

可以用position来设置定位

可选值 ： static 默认值，不开启定位

relative 相对定位

absolute 绝对定位

fix 固定定位

sticky 粘滞定位

特点：position：relative 开启了相对定位

1、如果不设置偏移量，元素的位置是不发生任何变化

2、设置偏移量，偏移量的相对位置是相对于元素原来在文档流中的位置（left：0；top：0）

3、设置相对定位后，元素的性质是不发··生变化

4、设置相对定位后，元素的层级会提高

5、设置相对定位后，元素是不会脱离文档流

2.绝对定位

开启绝对定位 position: absolute;

绝对定位后的特点

1、设置绝对定位后，元素会脱离文档流

2、设置绝对定位后，元素的性质就会发生变化，就不会再区分块还是行内了

3、设置绝对定位后，如果不设置偏移量，元素的位置也不会发生变化

4、绝对定位，它的原点是相对于其包含块来定位的

5、设置绝对定位后，元素的层级也会提高

包含块

1、默认情况（没有定位的情况下），包含块就是元素的祖先元素

2、如果是定位的情况下，包含块就是元素的开启了定位的，离它最近的祖先元素

如果祖先元素都没有开启定位，则包含块就是根标签（html）

注意：一般情况下，为了更好的控制子元素的位置，我们会在开启子元素的绝对定位后，会同步开启父元素的相对定位这叫"子绝父相"。

总结

以上就是今天要讲的内容，本文仅仅简单介绍了定位，怎么熟练运用定位，还有在什么地方用定位会比浮动方便呢，这些还需要我再学习学习，今天的分享就到这里啦，期待我们在明天的分享中相遇呀，最后，祝各位生活愉快，再见！