首先了解一下定位的概念：在CSS中关于定位的内容是：position:relative | absolute | static | fixed。static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。在文本流中，任何一个元素都被文本流所限制了自身的位置，但是通过CSS我们依然使得这些元素可以改变自己的位置，我们可以通过float来让元素浮动，我们也可以通过margin来让元素产生位置移动。
相对定位：relative
//相对定位书写代码 .box{ position:relative }相对定位特点：
相对定位： 1.参考点 相对于元素自身在文档流中的位置
2.没有脱离文档流
3.层级默认会上调 可以通过 z—index来调整
4.默认会在原来文档流位置 可以使用 top left bottom right 调整位置
5.一般用于对元素位置的微调
固定定位:fixed
//固定定位代码 .box{ position: fixed; }固定定位特点：
1、参考点 浏览器的可使窗口
2、脱离文档流
3、层级默认会上调 可以通过 z-index来调整
4、默认会在原来文档流位置 可以使用top left bottom right 来调整位置
5. 使用场景 想要元素相对于浏览器窗口定位
绝对定位：absolute
//绝对定位 .box{ position: absolute; }绝对定位特点：
1.参考点：距离自己最近的 非static的 祖先定位，如果找不到那么他的位置相对于最初 的包含快
2.脱离文档流
3.层级默认会上调 可以通过 z-index来调整
4.默认会在原来文档位置 可以使用 top left bottom right 调整位置
5.使用场景 一般 都是 子绝父相
CSS定位的应用及注意事项
[1] : 相对定位（position: relative）：如果对某一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直（或水平)位置（top,right,bottom,left四值），让这个元素”相对于”它的起点进行移动。注：设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留.
[2] ：绝对定位(position: absolute)：绝对定位使元素的位置与文档流无关，所以不会占用空间。与相对定位不同，绝对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。注：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框.
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/220935.html原文链接：https://javaforall.net
