CSS中的position和float

最新推荐文章于 2022-05-19 18:43:45 发布

土豆萝卜会发光

最新推荐文章于 2022-05-19 18:43:45 发布

阅读量566

点赞数 1

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/liuborong43/article/details/68070845

版权

2 篇文章 0 订阅

订阅专栏

position属性用来指定元素的定位类型，它的值有5种，分别是static、absolute、relative、fixed、sticky。

static

这是positions属性的默认取值，意味着这个元素没有也不接受任何对于该元素的位置偏移量属，即top, right, bottom, left 和 z-index 属性在position为static的情况下均无效。

absolute（绝对定位）

绝对定位，根据它的相对定位的父节点的位置定位。如果它没有相对定位的父节点，那么元素直接参考body容器定位。

绝对定位元素的定位值发生冲突时的解决方法:

如果同时指定 top 和 bottom（非 auto），优先采用 top。
如果同时指定 left 和 right，若 direction 为 ltr（英语、汉语等），则优先采用 left；若 direction 为 rtl（阿拉伯语、希伯来语等），则优先采用 right。

relative（相对定位）

relative定位非常相识于static定位。最大的区别就是相对定位的元素可以使用偏移量：top, right, bottom, left，z-index。这几个偏移量可以让元素朝任何方向移动，从而精确的控制显示出来的位置。

注意，尽管相对定位的元素可以使用偏移量属性，但是它在网页排版时按照的却是跟static position相同的方式（这点区别于fixed position和absolute position）。另外，相对定位的元素可以覆盖其它元素，或者被其它元素覆盖，尽管它自身并没有偏移。

sticky（粘性定位）

粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

例如：

#one { position: sticky; top: 10px; }

在 viewpor口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。

粘性定位常用于定位字母列表的头部元素。标示 B 部分开始的头部元素在滚动 A 部分时，始终处于 A 的下方。而在开始滚动 B 部分时，B 的头部会固定在屏幕顶部，直到所有 B 的项均完成滚动后，才被 C 的头部替代。

2.float

float的值有none、left、right。

float属性用于改变块元素对象的默认显示方式。当块元素对象设置了float属性后，它将不再独占一行，而是可以浮动到左侧或右侧，知道浮动的框外缘碰到包含框或另一个浮动框的边框为止。

注意：float和absolute的区别

1.absolute元素的位置相对于离它最近的已定位的祖先元素，它可以以父元素框的4个顶点为基准进行定位。而float属性定位时则是根据left或right属性值，以父元素的左上或右上为基准进行定位。

2.采用absolute属性定位的元素不能被文本所包围，而采用float属性定位的元素可以被文本包围（float最初设计的用意就是这个，用以取代HTML中的align属性）。

3.float的影响可控，absolute的影响不可控。

设置float和absolute属性的元素都脱离了文档流，因此它们都会影响到其下方的元素。但是，absolute是布局属性，使用它时没有一种有效的方法使之与其下方的元素不重合在一起。

相反，若一个元素指定了float属性，当我们向其下方（或后面）的元素的应用了clear属性后（clear:left；clear:right；clear:both），其后的元素就不再受影响了。所以一般在网页布局时，更多的使用float属性。

关注