父盒子设置了相对定位，子盒子设置了绝对定位，如何以浏览器为定位标准

当父盒子设置了相对定位，子盒子设置了绝对定位时，子盒子的定位是相对于父盒子的位置进行定位的。如果要以浏览器为定位标准，可以将父盒子设置为相对于浏览器的定位，即使用`position: fixed`或`position: absolute`，然后将父盒子的`left`和`top`设置为0。这样子盒子的定位就相对于浏览器了。

相关问题

父级盒子上面还有相对定位，如何将绝对定位的子盒子以浏览器为定位标准

如果父级盒子上面有相对定位，子盒子的绝对定位会以父级盒子为定位标准。如果要将绝对定位的子盒子以浏览器为定位标准，可以将父级盒子的定位方式改为固定定位或者绝对定位，并将位置设置为0。这样子盒子的定位就会以浏览器为参考标准了。

例如，HTML代码如下：

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

CSS代码如下：

#parent {
  position: relative;
  top: 50px;
  left: 50px;
}

#child {
  position: absolute;
  top: 10px;
  left: 10px;
}

上面的代码中，父级盒子`#parent`有相对定位，子盒子`#child`有绝对定位。子盒子的位置是以父级盒子为标准的。如果要以浏览器为标准，可以将父级盒子的定位方式改为固定定位或者绝对定位，并将位置设置为0。例如：

#parent {
  position: fixed;
  top: 0;
  left: 0;
}

#child {
  position: absolute;
  top: 10px;
  left: 10px;
}

这样子盒子的定位就会以浏览器为参考标准了。

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;
}