💦 关于相对定位——relative

说明：是将元素相对于它在标准流中的位置进行定位，通过设置偏移属性（left、top、light、bottom值）可将其移至相对于==它自己原来的位置==的定位，不会破坏正常的布局流，它在文档流中的位置仍然保留。

语法：{position:relative;}

注意：⏬

★相对定位通过偏移改变位置，但原来的位置继续占有（人走了，位置还占着）

★相对定位是相对于自己来移动位置，以自己的左上角为基点移动。

★相对定位不脱标，盒子仍在标准流中。

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

2.absolute—绝对定位

position:absolute;

① 绝对定位脱离文档流

② 绝对定位相对谁位移

👉 如果祖先级没有已定位元素，以body左上角为基准做偏移

👉 如果祖先级有已定位元素，以离的"最近的""祖先级""已定位元素"的左上角为基准做偏移

③ 最适合做"最近的""祖先级""已定位元素"是相对定位relative

💦 关于绝对定位——absolute

说明：相对于父级元素的绝对定位，浮动、脱离文档流不占据空间（俗称：脱标），就是我们所说的层，其位置相对于最近的已定位父元素而言的位置，若父级都没有定位，则以html（根元素）可直接指定 “left”、“top”、“right” 以及 “bottom” 属性。(层叠的顺序z-index:value)

👉 注意：若body不设置尺寸的话，默认是等于html的。若body单独设置宽高后就可看出和html的上下级关系(更明显的话可以设置各自的背景色)，此时body是作为absolute元素的最近的祖先级元素的，如果body没有设置相对定位，则absolute元素是相对于html做偏移的；如果设置了相对定位，则相对于body的边线做偏移。

语法：{position:absolute }

注意：完全脱标，完全不占位置

脱离文档流，会发生4件事：⏬

① 不占页面空间

② 后续元素上前补位

③ 没有设置宽度的元素，脱离文档流之后，宽度靠内容撑开

④ 任何元素脱离文档流之后，都可以设置宽高，都可以设置上下外边距

3.z-index堆叠顺序

堆叠的特点

① 默认情况下，后写的已定位元素，堆叠顺序高。默认堆叠在0~1，取不到1

② 浮动和定位的堆叠对比

浮动的堆叠在-1~0之间，取不到0，还不能z-index设置

③ z-index：取值为无单位的数字，一般在-1000~1000之间取值

④ 堆叠顺序对父子关系无效，永远儿子压在爹上面

⑤ 只有已定位元素可以设置堆叠顺序

💦 关于z-index属性

使用z-index有以下几个规则：

z-index就是堆叠上下文，它规定一个元素的堆叠顺序。一般来说，拥有更高堆叠顺序的元素会处于较低堆叠元素的前面。

① z-index只应用在定位的元素，默认z-index:auto。

z-index不设置和设置为0有什么区别？ z-index如果不设置就是默认值auto，那么它就不处于堆叠上下文中。如果z-index的值设置为0的话，该元素依然会处于堆叠上下文中，它会处于z-index为正数的元素后面，负数的前面。

② z-index取值为整数，数值越大，它的层级越高。

z-index可以是负值吗？可以的。但是需要注意的一点是，z-index为负值的元素不仅处于z-index为0的元素的后面，而且还处于其它普通元素（没有堆叠的元素position:static和z-index:auto）的后面。

③ 如果元素设置了定位，没有设置z-index，那么谁写在最后面的，表示谁的层级越高。

④ 从父现象。通常布局方案我们采用子绝父相，比较的是父元素的z-index值，哪个父元素的z-index值越大，表示子元素的层级越高。所以，对于“z-index的值是越大越靠前吗？” ，答案是否定的，还要看父元素的等级

小结：

👉 z-index堆叠上下文只有在postion:relative/absolute/fixed脱离文档流控制时才生效，static时无效。

👉 当父元素和子元素都处于堆叠上下文时，子元素继承父元素的优先级，故父元素大的就大，如果父元素没有处于堆叠上下文时，即z-index:auto;或者position:static;时，子元素不会继承父元素的优先级。ps：position:static——是所有元素在HTML文档流中的默认定位方式。即网页中所有元素都默认的是静态定位，也就是标准流的特性。

👉 z-index为0时依然处于堆叠上下文中，比负值高，比正值低。

👉 z-index为负值时不仅会处于z-index为0和正值元素的后面，还会处于非堆叠元素的后面。

🕐 番外：z-index属性详解

所有定位元素的优先级高于非定位元素；z-index为负值，元素会被普通流中的元素覆盖

◼️ 不使用 z-index时堆叠顺序 ⏬

不使用z-index的情况，也是默认的情况，即所有元素都不用z-index时，堆叠顺序如下(序号越大优先级越高):

1.根元素（即HTML元素）的background和borders

2.正常流中非定位后代元素（这些元素顺序按照HTML文档出现顺序）

3.已定位后代元素（这些元素顺序按照HTML文档出现顺序）

解释一下后两条规则：

正常流中非positoned element元素，总是先于positioned element元素渲染，所以表现就是在positioned element下方，跟它在HTML中出现的顺序无关。

没有指定z-index值的positioned element，他们的堆叠顺序取决于在HTML文档中的顺序，越靠后出现的元素，位置越高，和position属性无关。

即所有定位元素的优先级高于非定位元素，但非定位元素和非定位元素之间与 定位元素和定位元素之间的顺序取决于HTML文档出现顺序, 靠后的优先

◼️ 浮动z-index堆叠顺序 ⏬

浮动元素z-index位置介于非定位元素和定位元素之间, 堆叠顺序如下(序号越大优先级越高):

1.根元素（即HTML元素）的背景和border

2.正常流中非定位后代元素（这些元素顺序按照HTML文档出现顺序）

3.浮动元素(浮动元素之间是不会出现z-index重叠的)

4.正常流中inline（行内）后代元素

5.已定位后代元素（这些元素顺序按照HTML文档出现顺序）
non-positioned元素的背景和边界没有被浮动元素影响，但是元素中的内容受影响（浮动布局特性）

浮动元素之间是不会出现z-index重叠的。

非定位元素和非定位元素之间和 定位元素和定位元素之间的顺序同上取决于HTML文档出现顺序, 靠后的优先。

◼️ z-index元素之间的堆叠顺序 ⏬

再次强调z-index只适用于已经定位的元素（即position:relative/absolute/fixed），要想改变元素的堆叠顺序就得用到z-index。简单来说就是z-index的值越大优先级越高越靠上。

子元素的z-index值只在父元素范围内有效，举个例子: 👇

定位元素A（z-index:100）里面有定位元素A1（z-index:300），而定位元素B和元素A兄弟关系（z-index:200）。你会发现无论A1的z-index是多大，也会被z-index是200的B所覆盖，因为A的z-index只有100。

4.fixed—固定定位

1.脱离文档流

2.永远以body左上角为基准偏移

3.不管页面怎么滚动，固定定位的元素都会显示在可视区域的某一个位置不动

💦 浮动与定位区别：

◼️ 浮动和定位的相同点：

都能使元素脱离文档流，不占页面位置
CSS2中能够使标签脱离文档流的属性有：①float:left/right; ②postion:absolute/fixed;

◼️ 浮动和定位的不同点：

①浮动特点：float脱离文档流时，其他盒子会无视这个标签，但其他盒子内的文本、行内(如图片)、行内块(如表单)依然会为这个标签让出位置，环绕在周围( 脱离文档流，不脱离文本流 )。

②定位特点：而对于使用position脱离文档流的标签，其他盒子完全无视它，包括标签内部的文本、图片、表单标签（既脱离文档流，又脱离文本流）

注意：所有的标签都能够使用以上属性，脱离文档流之后

1. 不再区分块级和行内标签，类似行内块元素（行内块同时具有行内和块级元素特性）。

2. 宽高默认由内容撑开，可以设置width和height及所有盒模型属性,即使行内元素也可以设置宽高

所以，浮动元素可以姑且认为是是半脱离文档流的，不像position:absolute,fixed 完全脱离文档流，所以浮动的元素不会覆盖行内元素，但是可以覆盖块级元素，他们的权重顺序是：内联元素>浮动元素>块级元素。

绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就当绝对定位的元素不存在时一样。因为绝对定位的框与文档流无关，所以绝对定位的元素是可以覆盖页面上的其他元素（使用偏移属性在做定位时如果没有进行精准定位时会出现覆盖的问题）

◼️ 小结：🔽

👉 文档流是指元素在排列布局中所占用的位置。具体来说就是页面在布局的时候，自上而下地分成一行一行，并且在每一行中元素都是从左至右依次排放。

👉 没有设置浮动的块级元素都会独占一行，若设置了浮动，则它会按照设置的规则浮动在某行的某一端，如果放置不下，则另起一行再进行浮动。

👉 行内元素不会独占一行。一个元素浮动或绝对定位后，它将自动转换为块级元素，而不论该元素本身是什么类型。

👉 注意区分文档流和文本流——文档流是相对于盒模型的概念，而文本流是相对于段落文字的概念。

👉 元素设置浮动之后，会脱离文档流，块级元素感知不到浮动元素的存在，直接在它上面布局。但是浮动元素对文字有影响，文字会环绕浮动元素布局，所以浮动元素没有脱离文本流。不过如果使用绝对定位之后，元素既会脱离文档流，也会脱离文本流。

👉 有以下三种情况会使得元素脱离文档流：① 浮动—float；② 绝对定位—position: absolute；③ 固定定位： position: fixed

【CSS】定位—相对定位，绝对定位，固定定位_06

一.CSS3概述

二.CSS的语法规范

三.基础选择器

四.尺寸和边框

五.盒子模型

六.背景设置

七.渐变知识

八.文本格式化

九.表格

十.普通流与浮动定位

十一.css中常用的其它属性

十二.定位：相对定位，绝对定位，固定定位

1.relative—相对定位

2.absolute—绝对定位

3.z-index堆叠顺序

4.fixed—固定定位

网站公告

今日签到

热门文章

最新发布