css position

这个positionCSS属性指定一个元素的位置在一个文档。这个top，right，bottom，和left属性确定定位元素的最终位置。

* Keyword values */
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

/* Global values */
position: inherit;
position: initial;
position: unset;

---

• positioned 是一种元素的计算position值是relative，absolute，固定的，或sticky。（换句话说，它除了静止的。
• position:relative元素是一种元素的计算position值相对的。这个top和bottom属性指定的垂直偏移量从正常的位置；left和right属性指定的水平偏移
  
  • position:absolute元素是一种元素的计算位置值absolute或固定的.这个top，right，bottom，和left属性指定的偏移量从元素的包含块的边缘。（包含块是祖先的元素的相对位置。）如果元素有利润，他们加入到偏移。
  • position：sticky 的元素是一种元素的计算position值粘性的。作为其相对位置直到其包含块过指定的阈值，在这一点上，它是作为固定。

大多数时候，绝对定位的元素，height和width设置auto以适合他们的内容。然而，不可替换的绝对定位元素可以通过指定顶部和底部，并留下未指定的高度（即，自动）来填充可用的垂直空间。
2.同样，它们也可以通过指定左、右和宽度作为自动填充来填充可用的水平空间。

除了刚才描述的绝对位置元素填充可用空间的情况之外
1. 如果顶部和底部都是指定的（从技术上讲，没有自动填充），top有效。
2. 如果 left和rigth都有设定值，当它的direction为ltr(left to right) left有效，当它的direction为rtl right有效

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性到第一非static父元素的left,top,right,bottom进行定位
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。
relative	生成相对定位的元素，相对于其正常位置进行定位

如果第一个元素为 abosolute ：

• 同胞元素为fixed,对同胞元素布局没影响，不指定top,left,bottom,right，从top=0开始
• 同胞为relative,，同胞不指定top left bottom right，同胞的定位是相于浏览器来说
• 同胞为absoulate，除width,height不指定任值，两者相对上一个非absolute元素开布局,top=0时相于浏览器开始处布局

如果第一元素为fixed

• 同胞为absolute，不指定任何值，在浏览器开始处布局
• 同胞为fixed,不指定任何值,从浏览器开始处布局
• 同胞为relative，不指定任何值，从浏览器开始处布局

如果第一元素为relative:

• 同胞元素为absolute不指定任何值，它在第一个元素下开始布局，top=0从浏览开始布局
• 为fixed时 不指定任何值，它相对于浏览器 处布局
• 为relative 它在第一个元素下开始处布局