position: absolute;超出父盒子还需要显示怎么办

如果一个元素设置了 `position: absolute;`，它会脱离文档流并相对于最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块进行定位。

如果你希望这个元素可以超出父盒子的范围进行显示，可以考虑给父盒子设置 `overflow: visible;`，这样子元素就可以超出父盒子的范围进行显示了。如果不想让子元素超出父盒子的范围，可以给父盒子设置 `position: relative;`，这样子元素就相对于父盒子进行定位，不会超出父盒子的范围。

相关问题

css将子盒子放在父盒子的最底部

可以使用`position`和`bottom`属性来实现。首先，将父盒子设置为`position: relative;`，然后将子盒子设置为`position: absolute;`并设置`bottom: 0;`，如下所示：

.parent {
  position: relative;
}
.child {
  position: absolute;
  bottom: 0;
}

这样，子盒子就会被放置在父盒子的底部。注意，如果父盒子没有设置高度，子盒子可能会超出父盒子的底部。

js设置定位后父盒子设置overflow

当父盒子设置了 `overflow:hidden`，子元素设置了定位（position: absolute/fixed）时，子元素可能会被裁剪掉，因为它的位置超出了父元素的范围。解决方法有两种：

1. 改变父元素的布局方式：将父元素的 `position` 属性设置为 `relative` 或 `static`，或者将其 `display` 属性设置为 `inline-block`。

2. 调整子元素的位置：将子元素的 `top`、`bottom`、`left`、`right`属性值调整，使其不超出父元素的范围。

例如：

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

.parent {
  position: relative;
  overflow: hidden;
}

.child {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
}

或者：

.parent {
  display: inline-block;
  overflow: hidden;
}

.child {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
}