自学前端第十八天:CSS精准定位position

超级重点:CSS精准定位(position)

一.

①CSS定位基本概念:如果说, float浮动关键在一个 “浮起来” 字上面， 那么 我们的position定位关键在于一个 “精准位” 上。

②CSS定位目的上，如果说，浮动的主要目的是 让多个块级元素一行显示，那么定位的主要价值就是 移动位置， 让盒子到我们想要的"任意坐标"位置上去。

③CSS定位本质上: 不仅能像float浮动一样,可以脱离文档流束缚的情况下将元素放在你想放置的位置,还可以帮助你快速精准,。就跟高德地图精确的定位系统一样，输入"起始坐标"就可以轻松搞定。

④CSS浮动和定位的细微区别:float浮动流虽然脱离标准文档流,但还是有自己的文档流标准的,只能多元素一行显示或者分隔左右,但position定位就不一样了,他可以去任意的地方,不仅脱离的标准文档流,而且还自己开辟一个没有束缚轨道世界层级,可以任意精准定位飞翔,想去哪就去哪

⑤定位和浮动就像是在浏览器标准文档流页面上再覆盖一层新的自己的文档流白纸，自己玩自己的

⑥举例CSS定位在网页中的应用(也非常常用)

四种定位总结表:(先熟悉)

1.脱标和不脱标的区别就在于:脱标之后会不会浮起来变为块元素然后去任何地方.(因此为什么说relative不脱标,因此他不会使元素变为块元素,因此行内元素使用相对定位时,要先转为块元素先(display:block或者float浮动起来),再相对定位相对于自身盒子左上角去移动)

2.标准文档流和相对定位区别在于:共同点都是不脱离标准文档流,属性但标准文档流内的元素不能在标准文档流内随意移动(必须从左到右,从上到下一行一行来),而设置相对定位属性是可以让元素在标准文档流内随意移动(而初始位置还留着,不给其他元素进位鸠占鹊巢)

3.浮动和绝对定位和相对定位的区别?

①浮动是脱标的,去飘起来去结构父级的左右上角对齐(如果前面有文档流会被挤下去),

②相对定位不脱标,只是飘起来去结构父盒子左上角的,只是相对于自身盒子左上角去在结构父级盒子原来文档流位置开始内随意移动,相对定位和浮动会不会忽略父级盒子的padding,在父级盒子的padidng内移动**

③而绝对定位是脱标,飘起来去定位父级盒子的四个角,开始随意移动,注意绝对会忽略父级padding,直接奔去左上角.

4.一个元素只写上了=position:relative代表这个元素没啥改变的,不用怕,因为不脱离标准文档流,相对于自身盒子左上角去在结构父级盒子原来文档流位置开始内随意移动

(①如下图:全部元素写上相对定位后不移动情况下,看第三个盒子清除相对定位之后即变回标准流,是和其他三个盒子使用相对定位是一样顺序的,这说明了当使用相对定位时，其实就是和之前的标准文档流的规则时一样的,相对定位不会让元素变为块元素,只是能飘起来,但是后面元素不能进位,保持标准流的排版)
②父级元素使用相对定位的好处(相比绝对): 因为不脱标,占有位置,让页面结构不会散架,而父级元素需要在常规文档流中占据位置(通常用于保持外层盒子父级结构之间的整体性和结构不塌陷)
**相对定位缺点(相比绝对)😗*因为不脱标,因此只能和标准文档流一样在结构父级盒子内固定死范围飘起来随意走动.(但是也比标准文档流好,标准流下的盒子不能自身移动的,只能靠margin/padding等相对移动)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7gMX9aRA-1619717926174)(C:\Users\tuyue\AppData\Local\Temp\1612461220741.png)]

一个元素写上了=position:absolute,代表这个元素要很大改变了,你要慌了,首先这个元素转为块元素,其次脱离标准文档流被鸠占鹊巢进位,最终是相对于"定位父级"的四个角去随意移动的
(①比如,下图全部元素都写上了绝对定位,则全部元素都脱标飘起来,大家各走各的了一团散沙.
(②这里注意细节:绝对定位会让浮动属性失效!!!)
③子元素使用绝对定位的好处是:可以跟着定位父级走,而定位父级可以有很多个(即可以在多个定位父级盒子内随意走动),而不是像relative只能在结构父级内相对于自身去移动的.

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，网页正常默认模式	不可以	在结构父级盒子内,正常顺序模式,不能随意移动.
相对定位relative	不脱标，原盒子但占有位置	可以	在结构父级盒子原来文档流位置内,飘起来相对自身位置左上角移动（自恋型）
绝对定位absolute	完全脱标，不占有位置	可以	在定位父级盒子相对于定位父级四个角去移动位置（拼爹型）,(不写偏移量是不会动的,继续在标准文档流即结构父级盒子左上角移动)
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器可视窗口移动位置（认死理型）

二.元素的position定位属性

元素的position定位属性主要包括①定位模式和②边偏移两部分。

1.定位模式(即定位的种类)

①在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{
position:属性值;
}

②position属性的常用值:

值	描述
static	自动静态定位（所有页面的标准文档流定位方式,相对于结构父级盒子左上角来移动）
relative	相对定位，相对于:当前自身盒子的左上角位置进行定位移动
absolute	绝对定位，相对于其:定位父级的四个角都能进行定位
fixed	固定定位，固定相对于浏览器窗口进行定位移动

③简单了解绝对和相对定位模式.

用Div+CSS进行网站布局时，做一些浮动层等特殊特殊效果时要考虑到定位问题。
这就要用到Position属性等。

1.Position属性有四个值：static、fixed、absolute和relative，

后面两个在布局中的定位里是经常用到的，顾名思义，absolute是指****绝对定位，

即将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位，

而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。

2.ralative是指相对定位，就是依据left，right，top，bottom等属性在正常文档流中偏移位置。

但是，怎么个绝对法，又怎么个相对法呢？

以前我一直没有仔细去研究它，到具体应用时有时会有点迷糊，我相信很多朋友也会有这样的问题。

今天我特意测试了一下，得出了以下结论：

3.当Position属性值为Relative时对象原来占有的位置保留，其后面的对象按原来文档流仍然保持

原来的位置,Top的值表示对象相对原位置向下偏移的距离bottom的值表示对象相对原位置向上

偏移的距离两者同时存在时，只有Top起作用。left的值表示对象相对原位置向右偏移的距离right的

值表示对象相对原位置向左偏移的距离两者同时存在时，只有left起作用。

④当Position属性值为absolute时对象从文档流中抽取出来，原占有的位置被后面的对象顶替

上来,Top的值表示对象上边框与浏览器窗口顶部的距离bottom的值表示对象下边框与浏览器窗

口底部的距离两者同时存在时，只有Top起作用；如果两者都未指定，则其顶端将与原文档流位置一致，

即垂直保持位置不变。left的值表示对象左边框与浏览器窗口左边的距离right的值表示对象右边框与**

浏览器窗口右边的距离两者同时存在时，只有left起作用；如果两者都未指定，

则其左边将与原文档流位置一致，即水平保持位置不变。
(即如果未指定偏移属性,则定位效果失效,会保持原来文档流,相对于结构父级盒子的左上角移动)

三.上下左右边偏移分类:(定位要 和 边偏移搭配使用的)

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离（往下）
bottom	底部偏移量，定义元素相对于其父元素下边线的距离（往上）
left	左侧偏移量，定义元素相对于其父元素左边线的距离（往右）
right	右侧偏移量，定义元素相对于其父元素右边线的距离（往左）

技巧:(相对和绝对定位的偏移属性 , 是有很大区别的!)
①如果相对定位的偏移属性: 上下左右偏移属性决定不了坐标原点,只是单纯的上下左右偏移,因为relative相对定位都是以当前"自身"盒子的左上角作为坐标原点在原来文档流位置去偏移
(这点和标准文档流相似,只是标准文档流只能通过margin或者padding或者line-height行高或者居中去调整盒子外部的东西让盒子相对位移 ,而不能真正调整自身盒子的位移)

②如果绝对定位偏移属性:则要看具体的方向了,因为上下左右偏移属性可以决定绝对元素盒子在定位父级盒子的定位方向 , 因为绝对定位是以定位父级盒子的四个角顶去作为绝对元素盒子偏移坐标方向, (比如 绝对盒子写top:0px和 left:0px 则代表是以定位父级盒子的左上角做偏移的)

第一.深入静态定位(static)

静态定位是网页所有文档流元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。

上面的话翻译成白话： 就是网页中所有元素都默认的是静态定位哦！ 其实就是标准流的特性。

在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

PS： 静态定位其实没啥可说的。

静态定位唯一的用处： 就是取消某个盒子的方向定位模式 和 让其定位模式所有偏移属性失效(等于把定位有关的东西全部注释了), 写回取消定位之后的文档顺序(不一定就是标准文档流了,看具体情况)。 position: static;

(下图第三个盒子取消定位，因此要按照相对定位生效之前原来的顺序排。其他可以在文档流任意飞翔)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z5StGYjS-1619717926183)(C:\Users\tuyue\AppData\Local\Temp\1612359681442.png)]

第二.固定定位fixed(认死理型,和背景图片滚动一样)

1.固定定位fixed是绝对定位的一种特殊形式，类似于 正方形是一个特殊的 矩形。它以浏览器窗口作为参照物来定义网页元素。

2.当元素的position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

3.当对元素设置fixed固定定位后，**它也是将脱离标准文档流的控制，始终依据浏览器可视窗口来定义自己的显示位置。**不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器可视窗口的fixed固定位置。

4.固定定位有两个注意点：

1. 固定定位的元素跟父亲盒子没有任何关系了，爸爸只认浏览器(window view,即浏览器可展示区域)。
2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。(固定死的)

PS:ie6等低版本浏览器不支持固定定位。

第三.深入相对定位 relative(参考系是自身盒子左上角,地心说)

神游物外，谓形体不动而心神向往，如亲游其境，以精神相交。

一.相对定位是将元素相对于它在标准流中的位置进行定位,有如下步骤:

第一步:当position属性的取值为relative时，就可以将元素定位于相对位置,相对于自身盒子左上角。

第二步:对元素设置相对定位后，可以通过边偏移属性改变元素的位置(是从元素的左上角作为坐标起点)，但是移动后它在文档流中原来的位置仍然保留,(通常用于保持外层盒子父级结构之间的整体性和结构不塌陷)。如下图所示，即是一个相对定位的效果展示：

2.relative相对定位注意：

1.相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来文档流的位置继续占有(很贪心,我都要)

2.相对定位relative不脱标，即相对定位是让元素在标准文档流内,飘起来其任何地方, 原始盒子的位置仍在标准流中占着，且原始盒子的后面的盒子仍以标准流方式对待它，即不会让其他文档流去进位去占有它原来的位置鸠占鹊巢,比如上图的小明就不能进位熊二的位置.（即relative参造物是其本身，并不脱离文档流，不管你怎么移动，它原有的位置还是会留着）

3.相对定位是以自身元素的左上角为坐标轴基点在原来文档流位置移动（相对于自身盒子来移动位置）

（PS：！！！注意float浮动和relative相对定位是正好相反的，浮动之后的元素会脱离标准流，脱标 = 不占原来位置，即浮动后会影响其他文档流去占浮动流位置鸠占鹊巢。）

4.使用relative相对定位于去移动盒子时， 都会保留盒子原有自身margin外边距，

5.相对定位通常和绝对定位搭配应用:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mce5Td7U-1619717926192)(C:\Users\tuyue\AppData\Local\Temp\1612374149488.png)]

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>定位</title>
  <style>
    * {
    
      margin: 0;
      padding: 0;
    }

    .wrap {
    
      position: relative;
      width: 300px;
      height: 120px;
      margin: 100px auto;
      border: 2px solid #ccc;
    }

    .wrap img {
    
      display: block;
      width: 100%;
      height: 100%;
    }

    .wrap p {
    
      position: absolute;
      top: 40px; /*左上角开始,分别向下40px和向右30px  */
      left: 30px; 
    }
  </style>
</head>

<body>
  <div class="wrap">
    <img src="img/1.jpg" alt