1.静态定位

静态定位，position: static;静态定位就是标准流，也就是不定位，了解即可。

2.相对定位

相对定位，position：relative；相对定位，这是相对于自己原来的位置的改变值，会占用原来的位置，不会脱标，因为会占用原来的位置，所以也不实用，一般会在子级设置定位的时候，只给父级设置相对定位，不给定偏移值，就是不改变位置，而且不会脱标，所以不会影响标准流布局，来看示例：

可以看到，d1和d2转成行内块之后显示在一行，d1相对定位，但是未给偏移值，所以占位置且待在原地，位置没有发生变化，下面我们给d1偏移值再看一下效果：

这次可以清楚地看到，虽然d1加了定位，且给了偏移值，但是d1原来的位置还在，其他盒子并不能占用该位置，相对定位一般配合绝对定位使用，下面我们来讲绝对定位。

3.绝对定位

绝对定位，position：absolute；绝对定位是相对于父级的位置去改变自身的位置，会脱标，定位后不占位置，具有行内块元素的特点，但是父级元素必须定位，如果父级未定位，那么寻找父级的父级，直到找到有定位的父级，如果都没有，就相对于浏览器可视窗口，来看示例：

可以看到d1盒子在box盒子的中间，d1盒子的位置已经没有了，所以d2盒子往前移，这是父级盒子有定位，所以d1相对于父盒子box的位置进行偏移，下面我们把父盒子box的定位去掉，顺便加上外间距，使其远离页面的左上角，再看d1盒子的位置：

现在可以看到，父级盒子box以及里面的所有内容，在外间距的作用下，往右下偏移，但是d1的位置相对于上一张图，好像没有什么变化，这是因为上一张图中box盒子也在左上角，现在没了定位，d1盒子就会继续找定位的父级盒子，直到body元素。所以，一般子盒子需要定位的话，需要找的他的亲爹父盒子，设置相对定位，也就是“子绝父相”，最后还有一种定位方式，固定定位

4.固定定位

固定定位，position：fixed，顾名思义，就是固定到某个地方，与父盒子或者子盒子都没有什么关系，既然是固定，也就不会随着滚动条移动的那种，下面我们把滚动条放在最上边，中间某个位置，最下边三种情况下，盒子相对于页面的位置，看一下是否改变了位置：

html以及css，box设置的高度大一些，才能显示出滚动条，d1盒子采用固定定位，偏移值为上100，左100，下面来看三种情况：

可以看到，不管滚动条在哪，固定定位的元素都不受影响，有些页面，在我们向下滚动滚动条的时候，右边会出现一个返回顶部的按钮，这个按钮就是通过固定定位实现的

5.定位偏移值

定位的元素可以通过设置偏移值，在改变他自身的位置，top是子盒子距离上边的距离大小，bottom是距离下边的距离，left和right是距离左、右的距离，相对于谁，就看是哪一种定位方式，用法都是一样的。

6.元素层级关系

我们现在知道了，布局有标准流，浮动和定位，其中，标准流就是直接一个元素，而浮动在上期文章中讲过，会脱标，有可能导致浮动的元素与标准流元素重叠，而我们刚刚说过的定位，也有可能与标准流重叠（因为定位，所以可以定在任何你想要的位置，改变偏移值即可），那么，当三种布局方式出现在同一个盒子里，它们之间有着怎么样的关系，谁会是老大哥，排在最上面呢，来看示例：

上面三个子盒子分别用了标准流，浮动，定位三种方法，设置了不同颜色的背景色，可以看到，显示效果为红色，说明定位的层级是最高的，经实验证明，不分定位类型，有兴趣的可以自行搭建实验模板实验，下面我们去掉定位：

显示效果为天蓝色，说明了浮动的层级比标准流要高，所以，层级大小是标准流<浮动<定位。

前端——CSS中常用的定位方式相关推荐

java中常用的定位方式有哪些_java-selenium八种元素定位方式
一.ID定位一般情况下页面元素的id属性在当前网页中是唯一的所以使用ID定位可以保证定位的唯一性,不会像其他定位方式一样可能定位到多个页面元素.但有的网页页面元素没有id属性值,导致无法使用ID定位 ...
问答：如何规划CSS 中的命名方式如何看待 CSS 中 BEM 的命名方式？
好多盆友很纠结 css命名规则怎么弄,还没起步就被绊住了,那么今天蝈蝈就针对这个问题来讨论一下没什么技术含量,但却对效率开发至关重要的 "问题". 下文是一些知乎大神的个人 ...
CSS的四种定位方式
CSS的四种定位方式 1.静态定位: 设置方式为position: static;静态定位的盒子是标准流状态,用于取消定位.静态定位的盒子处于网页的最底层,并且top.left.bottom.righ ...
前端开发中常用图片格式
前端开发中常用图片格式在我们的日常开发中.必不可少会使用很多种图片. 我们需要根据业务场景来选择所使用的图片类型. 这里我整理了一些常用图片类型.他们的优缺点以及建议的使用场景. 如何在计算机中显示 ...
css的三种定位方式使用探讨
css 3种类型定位方式,进行控制页面布局:普通定位,浮动定位,绝对定位. 默认使用普通流技术再页面中布局元素,希望表现与普通流不同,另外两个特性position和float 具体实例复制代码代码 ...
css中ul位置移动,css中ul怎么定位
css中ul怎么定位 css中所有的元素默认都是static定位,要改变ul的定位方式,我们只需要指定元素的css position属性即可. 关于定位的几种方式1.static定位(普通流定位) - ...
前端开发中常用设计模式-总结篇
本文是向大家介绍前端开发中常用的设计模式,它使我们编写的代码更容易被复用,也更容易被人理解,并且保证代码的稳定可靠性. 1.什么是设计模式通俗来讲,就是日常使用设计的一种惯性思维. 因为对应的这种思 ...
css中的position定位详解
css中的position定位详解 position属性指定了元素的定位类型. position属性的5个值:static,relative,fixed,absolute,sticky; 元素可以使用 ...
CSS中的position定位
CSS中position的定位主要分为静态定位,相对定位,绝对定位和固定定位,属性值分别为:static,relative,absolute,fixed:元素的位置通过 "left" ...

前端——CSS中常用的定位方式