css中的position定位

前言：

在画页面时遇到一个问题，用element-ui的图片放大查看大图的时候，放大后的图片仍然显示在小图的div中，而不是视口大小。在调试工具中排查问题，发现当把图片div的transform属性去掉之后，元素定位正常在视口，如果添加了transform属性，则仍旧显示在小图的视图div中。查看文档后发现是fixed定位的条件限制。

position属性用于指定一个元素在文档中的定位方式。定位属性：top right bottom left 决定了元素的最终显示位置。

 

1. 定位类型

• 相对定位 relative
• 绝对定位 absolute fixed
• 粘性定位 stickily

2. 定位后的尺寸

width和height被设定为auto后的绝对定位的元素，会按其内容大小调整尺寸。此外，被绝对定位的元素，可以通过设置top + bottom开保留height未指定的height高度，left + right来指定水平的weight宽度，并且如果原来设置了weight和height，仍以定位的宽高为准。

如果 top 和 bottom 都被指定（严格来说，这里指定的值不能为 auto ），top 优先。如果指定了 left 和 right ，当 direction设置为 ltr（水平书写的中文、英语）时 left 优先， 当direction设置为 rtl（阿拉伯语、希伯来语、波斯语由右向左书写）时 right 优先。

3. 取值

3.1 static

（默认）元素在文档常规流中当前的布局位置。

3.2 relative 

元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置，相对定位的元素并未脱离文档流（因此会在此元素未添加定位时所在位置留下空白）。

position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

3.3 absolute

元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。元素会跟随页面的滚动而滚动。

3.4 fixed

元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。元素不会根据页面的滚动而滚动。

3.5 sticky

元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。如果不指定top, right, bottom, 或left的值，则该属性不生效
该值总是创建一个新的层叠上下文（stacking context）。注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为（详情见Github issue on W3C CSSWG）。

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。