css定位(float、relative、absolute、fixed、sticky)说明

元素包括块级元素和行级元素，块级元素独占一行(可设置宽高)，行级元素(不能设置宽高)、行块元素(能设置宽高)并排显示。

正常文档流从上往下，从左往右。

元素从文档流中脱离后，不再占用文档流的位置，所以该元素下边的还在文档流中的其他元素会自动向上移动。
因为元素从文档流中脱离后与文档流无关，所以它们可以覆盖页面上的其它元素。

样式叠加(权重)、元素不继承边框和宽高。

1 float定位
（1）浮动元素非完全脱离文档流。
float的元素脱离正常的文档流，但是还会占据文档流的文本空间，比如float应用于图像，使文字环绕在其周围。
（2）设置浮动以后元素会向父元素的左侧或者右侧移动。
（3）浮动元素默认不会从父元素中移出。
（4）浮动元素向左或者右移动时，不会超过他前边的其他浮动元素。
（5）如果浮动元素上边是一个没有浮动的块元素，则浮动元素无法上移。
（6）浮动元素不会超过它上边的浮动的兄弟元素，最多就是和他一样高。
（7）主要作用就是让页面中的元素可以水平排列。
（8）脱离文档流的特点如下
1）块元素:   不再独占一行，且块元素的高度宽度默认被内容撑开，如果不设置宽高的话。
2）行内元素: 脱离文档流后会变成块元素，特点和块元素一样，可以设置宽高等属性。
（9）float能引起父元素的高度塌陷
在浮动布局中，父元素的高度是被子元素撑开的，当子元素浮动后，子元素从文档流中脱离，将无法撑起父元素的高度，导致
父元素高度缺失。父元素高度缺失以后，其下的元素会自动上移，导致页面布局混乱。float引起的高度塌陷则是可清除的，我
们常说的清除浮动就是指清除float带来的高度塌陷问题，比如父元素开启BFC，overflow: hidden。
（10）clear
如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素的影响。

2 relative定位
（1）元素开启相对定位后，如果不设置偏移量，则元素不会发生任何变化。
（2）相对定位会按照元素的原始位置对该元素进行移动。
（3）相对定位会提升元素的层级。
z-index属性
（4）相对定位不会使元素脱离文档流。
元素框偏移某个距离，元素仍保持其未定位前的形状，它原本所占的空间仍保留。
（5）相对定位不会改变元素的性质，块还是块，行内还是行内。

3 absolute定位
（1）开启绝对定位后，如果不设置偏移量，元素的位置不会发生改变。
（2）绝对定位元素是相对于其开启了定位的包含块进行定位。
包含块就是离当前元素最近的祖先块元素;在绝对定位中，如果所有的祖先块元素都没有开启定位，则根元素就是他的包含块。
（3）绝对定位会提升元素的层级。
z-index属性
（4）开启定位后，元素从文档流中完全脱离。
通过绝对定位，元素可以放置到页面上的任何位置。
（5）绝对定位会改变元素的性质，行内元素变成块元素，块元素的宽高被内容撑开。
（6）absolute能引起父元素的高度塌陷
由于absolute是完全脱离文档流，所以这种情况的高度塌陷是没办法清除的。

4 fixed定位
元素框的表现类似于将 position 设置为 absolute，唯一不同的是固定定位永远参照于浏览器的视口定位。固定定位的元素不会随着滚动条滚动。

5 sticky定位
粘滞定位和相对定位基本一致，不同的是粘滞定位可以在元素达到某一位置时将其固定。

标签：浮动,定位,float,脱离,元素,sticky,relative,文档
来源： https://www.cnblogs.com/LiuChang-blog/p/16173498.html