CSS中的position属性
2018-08-28 本文已影响0人
guangtoutou
position是CSS中非常重要的定位元素，有点惭愧一直都没有把这个概念吃透
- absolute是按照父元素来定位；fixed是按照屏幕窗口(viewport)来定位。注意absolute针对的是非static的父元素；如果没有这样的父元素，则一直上溯到
<body>元素 - relative并没有脱离文档流，不会影响其他元素的位置；absolute/fixed脱离了文档流，其他元素的位置会相应调整，占据释放出的空间
- fixed通常用来设定滚动屏幕时仍然固定不动的元素，例如NavBar
- absolute可以用来设定一个overlay的元素，如下图
overlay.jpeg
static
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
relative
该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
absolute
不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
fixed
不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。
width: auto的计算方式与position的关系
width：auto 表示宽度是可变的，浏览器会自动计算其宽度
-
position:static/relative实际宽度（width+border+margin）等于父元素width值，与内容长度无关。 -
position:absolute实际宽度（width+border+margin）取决于其内容的长度，但是最大不超过该元素的第一个非static定位的父元素的width右侧边界； -
posiition:fixed实际宽度取决于其内容的长度，但是最大不超出浏览器窗口。
参考
https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
