说说position的absolute和fixed共同与不同点分别是什么？

在前端开发中，position: absolute 和 position: fixed 都是用于脱离文档流的定位方式，但它们有一些关键的区别：

共同点：

  • 脱离文档流: 设置为 absolute 或 fixed 的元素都会脱离正常的文档流。这意味着它们不再占据原来的空间，其他元素会忽略它们的存在，就像它们不在那里一样。
  • 层叠上下文: 它们都会创建新的层叠上下文。这意味着它们的 z-index 属性只在当前层叠上下文中有效，可以用来控制它们与其他定位元素的堆叠顺序。
  • 偏移量生效: top、right、bottom 和 left 属性都可以用来控制它们相对于定位父元素（absolute）或视口（fixed）的位置。

不同点：

特性 position: absolute position: fixed
定位基准 最近的非 static 定位的祖先元素。如果没有，则相对于初始包含块（通常是<html>元素）。 浏览器视口。
滚动行为 随父元素滚动。 不随页面滚动，始终固定在视口中的相同位置。
top, right, bottom, left 相对于定位父元素的偏移量。 相对于浏览器视口的偏移量。
常用场景 在页面布局中，例如创建一个相对于父元素定位的子元素，例如下拉菜单、弹出框等。 创建始终显示在屏幕上特定位置的元素，例如导航栏、回到顶部按钮等。

举例说明：

  • position: absolute: 想象一个购物网站的商品图片，当鼠标悬停在图片上时，会弹出一个小的放大镜效果。这个放大镜就可以使用 position: absolute 定位，相对于商品图片进行定位，并随着商品图片的滚动而滚动。

  • position: fixed: 网站的顶部导航栏通常使用 position: fixed 定位，这样无论页面如何滚动，导航栏都会始终固定在屏幕顶部。

总结：

选择 absolute 还是 fixed 取决于你想要实现的效果。如果你希望元素相对于页面中的某个其他元素定位，并且随着该元素滚动，则使用 absolute。如果你希望元素始终固定在屏幕上的某个位置，则使用 fixed。

posted @ 2024-11-23 08:28  王铁柱6  阅读(338)  评论(0)    收藏  举报