Css Position定位属性

by · 2018年03月21日 · 1802 Words · ~4min reading time | Improve on


原文链接： Css Position定位属性

Z-index

z-index深入理解

  1. 子元素的z-index值只在父元素范围内有效

  2. z-index只对具有定位的元素有效

规则:

  1. background/border
  2. z-index =-1 为负值
  3. 空属性 block元素,无定位属性
  4. 浮动元素, float属性
  5. inline/inline-block
  6. position属性 z-index +1
  7. zindex=auto: zindex=0
  8. flex +1
  9. 元素opacity属性不为1(See the specification for opacity)
  10. 元素transform不为none
  11. 元素min-blend-mode不为normal
  12. 元素filter属性不为none
  13. 元素isolation属性为isolate
  14. z-index 为正值



Position

相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流
在布置文档流中其它元素，绝对定位元素不占据空间。绝对定位元素相对于最近的非 static 父元素定位。当这样的父元素不存在时，则相对于ICB（inital container block, 初始包含块）

使用场景

position: relative 相对于父元素进行偏移, 不会脱离文档流, 一般作用于父级元素
position: absolute 相对于父元素进行偏移, 但会脱离文档流, 一般作用于子级元素

position: relative

  1. 其相对于父元素进行偏移，
  2. 不会脱离文档流,并且原本的空间也占据着，下面的元素并不会顶替上去。

  3. (所以会发生重叠. 但是margin不会发生重叠,之后推挤其他元素)

    top/right/left/bottom 属性是不会对relative定位的元素所占据的文档空间产生偏移，
    那么margin/padding属性会让该文档空间产生偏移吗，答案是肯定的（会）

position: absolute zindex+1

absolute元素 定位参考 的是找到离自身 1.最近的 2.具有定位属性 的父级元素
元素设置成absolute后会脱离文档流，并且不占有原本的空间，后面的元素会顶替上去，

而且不论元素是行内元素还是块级元素，都会生成一个块级框，也就是例如行内元素span设置了absolute后就可以设置height和width属性了。

position属性

position意思为定位。可通过某参考点实现元素的定位

position: relative
元素将以自身为定位的位置作为参考点，通过top/bottom/left/right属性进行定位。一般配合absolute使用，也可使用此属性做居中。
其相对于父元素进行偏移，并且原本的空间也占据着，下面的元素并不会顶替上去

position: absolute
生成BFC，元素将以离其最近并带有position: relative声明的父元素的内边作为参考点，通过top/bottom/left/right属性进行定位。可用做菜单栏弹出的选项。

position: fixed
元素将以浏览器窗口为参考点，固定在浏览器页面上，通过top/bottom/left/right属性进行定位。可做为重要功能的按钮或广告。

position: sticky
默认表现与relative，当浏览器页面的顶端与元素的顶端距离相差为top值时，元素固定在浏览器页面顶端。通过top进行定位。可用作导航栏。

使用css布局position非常重要，语法如下：
position：static | relative | absolute | fixed |center | page | sticky

(1)、 static
可以认为静态的，默认元素都是静态的定位，对象遵循常规流。此时4个定位偏移属性不会被应用，也就是使用left，right，bottom，top将不会生效。
(2)、 relative
相对定位，对象遵循常规流，并且参照自身在常规流中的位置通过 top，right，bottom，left 这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
(3)、 absolute
a、绝对定位，对象脱离常规流，此时偏移属性参照的是离自身最近的定位父元素，如果没有定位的父元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
b、元素定位参考的是离自身最近的定位父元素，要满足两个条件，第一个是自己的父元素，可以是父元素也可以是父元素的父元素，一直找，如果没有则选择body为对照对象。第二个条件是要求父元素必须定位，通俗说就是position的属性值为非static都行。
(4)、 fixed
固定定位，与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。
(5)、 center
与absolute一致，但偏移定位是以定位父元素的中心点为参考。盒子在其包含容器垂直水平居中。（CSS3）
(6)、 page
与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3）
(7)、 sticky
对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）

Tags:

`