overFlow:auto影响position: absolute

`overflow:auto` 属性通常用于定义元素内容溢出的处理方式，当内容超过其容器尺寸时，如果设置为 `auto`，它会创建一个滚动条，允许用户查看超出的内容。然而，这不影响元素的定位属性 `position:absolute`。

`absolute` 定位会让元素相对于其最近的已定位祖先元素（如果有），如果没有，则相对于文档流。它不会占用任何位置空间，也不会影响到包含它的块级元素的内容流布局，即使该元素设置了 `overflow:auto`。

总结来说，`overflow:auto` 控制的是内容区域的显示，而 `position:absolute` 决定的是元素本身的相对位置。两者各自独立，并不相互影响。

相关问题

div设置属性position: absolute后设置overflow: auto;无效

当一个元素设置了 `position: absolute` 后，它会从文档流中脱离出来，不再占据原来的位置，而是相对于其最近的已定位（即设置了 `position` 属性，除了 `static`）的祖先元素进行定位。因此，如果你想要为其设置滚动条，需要将其父元素也设置为定位元素。

例如，如果你想要为一个 `position: absolute` 的 `div` 元素设置滚动条，可以将其父元素也设置为 `position: relative` 或 `position: absolute`，然后对其父元素设置 `overflow: auto`，如下所示：

HTML 代码：

<div class="parent">
  <div class="child"></div>
</div>

CSS 代码：

.parent {
  position: relative; /* 或者 position: absolute; */
  width: 200px;
  height: 200px;
  overflow: auto;
}

.child {
  position: absolute;
  width: 300px;
  height: 300px;
  background-color: #ccc;
}

在这个例子中，`.parent` 元素是一个定位元素，并设置了 `overflow: auto`，`.child` 元素是一个 `position: absolute` 的元素，其宽度和高度都大于 `.parent` 元素，因此会超出 `.parent` 元素的范围，此时，`.parent` 元素会显示滚动条，用户可以通过滚动条滑动查看 `.child` 元素的内容。

需要注意的是，当一个元素设置了 `position: absolute` 后，其宽度和高度不再受到父元素的限制，因此需要根据具体情况设置其位置和大小。

让overflow:auto 不显示滚动条，又不失滚动的效果呢

你可以使用伪元素将滚动条隐藏起来，同时保留滚动的效果。以下是一个实现的例子：

.element {
  overflow: auto;
  height: 200px;
  position: relative;
}

.element::-webkit-scrollbar {
  width: 0.5em;
}

.element::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

.element::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 1em;
}

.element::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

在这个例子中，我们使用了 `::before` 伪元素来覆盖滚动条的位置，并将其 `z-index` 设置为比内容区域更高的层级。这样，滚动条就被隐藏了起来，但仍然可以进行滚动。同时，我们使用了 `-webkit-scrollbar` 系列的属性来修改滚动条的样式。