position和float小结

Posted 2020-10-07 小目标

position属性值

Position的属性值共有四个static、relative、absolute、fixed。

static

所有元素在默认的情况下position属性均为static，而我们在布局上经常会用到的相对定位和绝对定位常用的属性top、bottom、left、right在position为static的情况下无效。其用法为：在改变了元素的position属性后，可以将元素重置为static让其回归到页面默认的普通流中。

relative

俗称的相对定位，重点在于对相对理解。每个元素在页面的普通流中会有“占用”一个位置，这个位置可以理解为默认位置，而相对定位就是将元素偏离元素的默认位置，但普通流中依然保持着原有的默认位置，并没有脱离普通流，只是视觉上发生的偏移。相对于默认位置偏移后，并不会影响其后面其他元素的定位。同时，position: relative并没有改变行内元素的Display属性（对行内元素设置宽度和高度均无效）。

absolute

俗称的绝对定位，绝对定位是相对而言的，怎么理解呢？应用了position: absolute的元素会循着节点树中的父（祖）元素来确定“根”，然后相对这个“根”元素来偏移。如果在其节点树中所有父（祖）元素都没有设置position属性值为relative或者absolute，则该元素最终将相对body进行位置偏移。应用了position: absolute的元素会脱离页面中的普通流并改变Display属性！

1）块状元素在position(relative/static)的情况下width为100%，但是设置了position: absolute之后，会将width变成auto（取决于内部元素的width）。

2）元素设置了position: absolute之后，如果没有设置top、bottom、left、right属性的话，浏览器会默认设置成auto，而auto的值则是该元素的“默认位置”，建议设置偏移量。

一些的position小知识

1）position: absolute会忽略根元素的padding，相对于根元素的border里面的边定位。

2）行内元素在应用了position：absolute之后会改变display为block。

因此，要注意到relative是并没有改变行内元素的呈现模式，而absolute是会改变行内元素的呈现模式，如果设置了absolute并不需要显式的的将元素display改成block。

3）应用了position: absolute / relative之后，会覆盖其他非定位元素（即position为static的元素），如果你不想覆盖到其他元素，也可以将z-index设置成-1。

fixed

fixed和absolute有很多共同点：

1. 会改变行内元素的呈现模式，使display之变更为block。
2. 会让元素脱离普通流，不占据空间。
3. 默认会覆盖到非定位元素上。

fixed与absolute最大的区别在于：

absolute的”根元素“是可以被设置的，而fixed则其”根元素“固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。

对于页面布局中的最外层div设置 position:fixed;top:0;left:0，则页面无法滚动，因为fixed定位的元素相对于浏览器的位置保持不变，即div的顶部挨着浏览器窗口的顶部。适用于出现弹窗之后，滚动弹窗中的内容，主页面内容不滚动。

使用fixed定位吸底按钮时，要在主页面的内容最后面添加一个跟按钮高度相同的div，防止按钮遮挡住主页面的内容。

 float属性

float的属性值有none、left、right，有几个要点：

1.只有横向浮动，并没有纵向浮动。

2.当元素应用了float属性后，将会脱离普通流，其容器（父）元素将得不到脱离普通流的子元素高度。

3.会将元素的display属性变更为block。

4.浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片）。

5.浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）。

float与position的兼容性问题

1）元素同时应用了position: relative和float属性后，则元素先浮动到相应的位置，然后再根据（top / left / bottom / right）所设置的距离来发生偏移。

2）元素同时应用了position: absolute和float属性，则float失效。