js设置定位后父盒子设置overflow
时间: 2023-08-05 13:04:45 浏览: 58
当父盒子设置了 `overflow:hidden`,子元素设置了定位(position: absolute/fixed)时,子元素可能会被裁剪掉,因为它的位置超出了父元素的范围。解决方法有两种:
1. 改变父元素的布局方式:将父元素的 `position` 属性设置为 `relative` 或 `static`,或者将其 `display` 属性设置为 `inline-block`。
2. 调整子元素的位置:将子元素的 `top`、`bottom`、`left`、`right`属性值调整,使其不超出父元素的范围。
例如:
```html
<div class="parent">
<div class="child"></div>
</div>
```
```css
.parent {
position: relative;
overflow: hidden;
}
.child {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
}
```
或者:
```css
.parent {
display: inline-block;
overflow: hidden;
}
.child {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
}
```
相关问题
外部大盒子设置overflow-y: auto;内部盒子设置定位后,不能滚动
这种情况通常是由于内部盒子的定位导致了外部盒子的滚动失效。解决方法有两种:
1. 使用 `position: sticky` 替代 `position: absolute` 或 `position: fixed`。这样可以让内部盒子在滚动时保持在固定位置,并且不会影响外部盒子的滚动。
例如:
```css
.outer-box {
height: 200px;
overflow-y: auto;
}
.inner-box {
position: sticky;
top: 0;
}
```
2. 在外部盒子上添加 `position: relative`。这样可以将内部盒子相对于外部盒子进行定位,而不是相对于整个文档进行定位,从而不会影响外部盒子的滚动。
例如:
```css
.outer-box {
position: relative;
height: 200px;
overflow-y: auto;
}
.inner-box {
position: absolute;
top: 0;
}
```
无论使用哪种方式,都需要根据实际情况进行选择。
fixed定位下absolute布局设置overflow手机上失效
这种情况可能是由于移动端浏览器对`fixed`和`absolute`定位元素的渲染机制不同所导致的。在移动端浏览器中,`fixed`定位元素的位置是相对于视口而不是文档进行定位的,而`absolute`定位元素则是相对于最近的非`static`定位祖先元素进行定位的。因此,如果一个`fixed`定位元素的祖先元素包含了一个设置了`overflow`属性的容器,则在移动端浏览器中可能会导致`fixed`定位元素的位置不再相对于视口进行定位,而是相对于该容器进行定位。
为了解决这个问题,你可以尝试将`fixed`定位元素的祖先元素中最近的非`static`定位元素设置为`fixed`定位,以确保该元素的位置始终相对于视口进行定位。或者,你可以考虑使用JavaScript来动态计算`fixed`定位元素的位置,以确保其位置始终正确。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)