CSS知识点梳理(11)-定位

技术总结 评论

定位可以准确地定义元素框相对于其正常位置，或相对于其父元素、另一个元素，甚至是浏览器窗口本身(视口，viewport)的位置，应该出现在哪里。

1
2
3
4
5
Value:          static|relative|sticky|absolute|fixed
Initial value:  static
Applies to:     All elements
Inherited:      No
Animatable:     No
  • static: 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分。行内元素创建一个或多个在其父元素中流动的行框。
  • relative: 元素框偏移一段距离（相对于其自身偏移）。元素仍保持其为定位前的形状，并且它原本所占的空间仍保留。
  • absolute: 元素框从文档流完全删除，并相对于其包含块定位。元素原先在正常文档流中占据的空间会关闭，就好像元素不存在一样。定位元素生成块级框，而不论原来它在正常流中生成的框的类型
  • fixed: 元素框的表现类似于将position设置为absolute，但是其保护块是视口本身（viewport）。
  • sticky: 元素留在正常流中，直到处罚它的粘贴的条件出现，这时它从正常流中移除，其行为同absolate相同，但它在正常流中的原始空间被保留下来。一旦不在满足粘贴条件，元素将回到其原始空间中的正常流。
    stick元素是根据滚动位置在relative和fixed之间切换。它的位置是relative，直到一个给定的偏移位置在视口被满足，然后切换至fixed,就好像它“粘”在那个位置。

包含块

一般来讲，包含块就是包含另一个元素的方框。在正常流中，html根元素是body元素的包含块。当涉及到定位时，包含块完全取决去定位的类型。

  • “根元素”的的包含块，也称初始包含块，，在大多数浏览器中，是一个视口大小的矩形。
  • 对于一个非根元素，如果其position值是relative或static，包含块有最近的块级框、表单元格或行内块祖先框的内容边界构成。
  • 对于一个非根元素，如果其position值是absolute，包含块设置为最近的position值不是static的祖先元素（可以是任何类型）。具体如下：
    • 如果祖先是块级元素，包含块设置为该元素的填充边界，即有其边框界定的区域。
    • 如果这个祖先是行内元素，包含块设置为该元素的内容边界。
    • 如果没有祖先，则元素包含块定义为初始包含块。

定位元素的宽、高

  • relative,absolute,fixed使用了 4 个属性（top,bottom,right,left）来描述定位元素个各边相对于其包含块的偏移，那么元素的宽、高将由这些偏移隐含确定。
  • 可以是使用max-width,min-height来为定位元素设置最小/最大 宽/高。

内容溢出

1
2
3
4
5
Value:            visible|hidden|scroll|auto
Initial value:    visible
Applies to:       Block-level, replaced elements
Inherited:        No
Animatable:       No
  • visible,默认值，元素内容在元素框之外也可见，但不会改变元素框的形状。
  • scroll,元素内容在元素框的边界处剪裁，会提供滚动机条。
  • hidden,元素内容在元素框的边界处剪裁，也不会提供滚条，使用户访问超出剪裁区的内容
  • auto,只在必要时提供滚动条。

元素可见性（visibility）

1
2
3
4
5
Value:          visible|hidden|collapse
Initial value:  visible
Applies to:     All elements
Inherited:      Yes
Animatable:     No
  • visible，默认值，元素设置为可见
  • hidden, 元素设置为“不可见”.但元素还会影响文档的布局，就好像声明opacity: 0;。换句话说，元素还在那里，只不过你看不到它。这与display: none有区别，对于后者，元素不仅不显示，还会从文档中删除，且对文档布局没有任何影响
  • collapse，用于表格元素。

绝对定位

包含块和绝对定位元素

元素绝对定位时，会从文档流中完全删除。相对于其包含块定位，其边距的边界根据偏移属性放置。定位元素不会围绕其他元素内容流动，反之亦然。这就意味着，一个绝对定位元素可能与其他元素重叠或被它们重叠。
绝对定位的元素的包含块是最近的position值不为static的祖先元素。
元素绝对定位时，也会为其后代元素建立一个包含块

（自动偏移）Auto-edges

  • 非替换元素
    水平方向：left + margin-left + border-left-width + +padding-left+ width + padding-rgiht + border-right-width + margin-right + right = 包含块的width

    1. 如果left,width,right都设置auto。结果：左边界置于静态位置（元素在正常流中的原本位置，即在从左向右读的语言中，要把auto替换为静态位置），元素的width设置为“刚好只能包含其内容”，right的计算值就是从元素的右边界到包含块的右边界之间的距离。
    2. 如果left,width,right不是auto，左右外边距（margin： 0 auto;）都设置为 auto。这实际上回让元素居中。
    3. 如果定位元素个宽度相加还小于包含块的宽度，在这种情况下，浏览器会忽略right的值，并重置right的值
    4. 一般来讲，如果只有一个属性设置auto,就会修改这个属性来满足等式。元素会延伸到必要的宽度，而不是“收缩”内容

  • 替换元素

    1. 如果width设置为auto,width的实际值有由元素内容的固有宽度决定。如果声明了width则使用该值
    2. 在从左向右读的语言中，如果left值为auto,要把auto替换为静态位置。
    3. 如果left或right仍为auto，则将margin-left或margin-right的auto值替换为 0.
    4. 如果此时margin-left和margin-right的值还定义为auto,则把它们设置为相等的值，从而将元素在其包含块中居中
    5. 在此之后，如果只剩一个auto,则将其修改为等于等式的余下部分
    6. 如果值过度受限，则浏览器会忽略 right 的值，并被新计算值覆盖。

Z 轴上的放置

  • 利用z-index可以改变元素相互的覆盖顺序，较高z-index值覆盖较低z-index值的元素。
  • 一旦给一个元素指定了z-index值（不是auto），该元素就会建立自己的局部叠放上下文，这意味着，相对于该祖先元素，所以元素的后代都有自己的堆叠顺序。
  • 如果一个元素为其后代建立了叠放上下文，并且该元素位于此上下文 z 轴的 0 位置上。
1
2
3
4
5
6
7
8
9
10
11
12
p {border: 1px solid; background: #DDD; margin: 0;}
#one {position: absolute; top: 1em; left: 0;
width: 40%; height: 10em; z-index: 3;}
#two {position: absolute; top: -0.75em; left: 15%;
width: 60%; height: 5.5em; z-index: 10;}
#three {position: absolute; top: 10%; left: 30%;
width: 30%; height: 10em; z-index: 8;}
p[id] em {position: absolute; top: -1em; left: -1em;
width: 10em; height: 5em;}
#one em {z-index: 100; background: hsla(0,50%,70%,0.9);}
#two em {z-index: 10; background: hsla(120,50%,70%,0.9);}
#three em {z-index: -343; background: hsla(240,50%,70%,0.9);}

上述元素的叠放顺序:

1
2
3
4
5
6
p#one       3
p#two       10
P#three     8
P#one em    3   100
p#two em    10  10
p+three em  8   -343

固定定位

  • 固定定位与绝对定位很类似，只不过固定定位元素的包含块是视窗。固定定位时，元素会完全从文档流中移除，不会有任何相对于文档中任何部分的位置。
  • 固定定位的用途在屏幕上放置一个“永久性”元素，例如，购买链接、版权信息

相对定位

  • 使用偏移属性移动定位元素，不过，原来所占据的空间不会从文档流中移除
  • 如果相对定位一个元素，它会立即为其所有子元素建立一个姓的包含块，这个包含块对应于该元素原本所在的位置，元素偏移是相对于其自身位置
  • 如果遇到过度受限的相对定位，一个值会重置为另一个值的相反数。例如:
    1
    2
    3
    4
    5
    strong {
      position: relative;
      top: 10px;
      bottom: 20px;
    }
    因此： bottom的值总等于-top，即bottom: -10px;

粘性定位

  • 偏移量用于定义与包含块相关的粘性定位矩形（sticky-positioning retangle）
  • 粘性地位元素在正常流中，直到它的“粘性边缘”接触到矩形的粘性边缘，它就会脱离文档流，固定在那个位置。
  • 使用overflow: scroll也可以为元素创建包含块，这中情况下，包含块不是有定位创建的。
  • 如果定义多个偏移量属性，且都是auto以外的值，那么所以这些属性都成为“粘性边缘”。
  • 显示的指定z-index的值，来决定粘性元素的叠放顺序

爱学兮Front End & Vue & TypeScript

前端狗，偶尔思考，间歇式码字