css中父元素overflow:hidden,子元素position:absolute,怎么让子元素超出父元素边界还能显示?
时间: 2024-05-12 15:13:03 浏览: 373
详解CSS-opacity子元素继承父元素透明度的解决方法
可以尝试使用父元素的 `overflow: visible` 属性,这样子元素就可以超出父元素的边界并且显示出来了。具体代码如下:
```css
.parent {
position: relative;
overflow: visible; /* 父元素的 overflow 属性设置为 visible */
}
.child {
position: absolute;
top: -20px; /* 子元素超出父元素顶部 20px */
left: -20px; /* 子元素超出父元素左边 20px */
}
```
当然,如果你需要在父元素的一部分区域内让子元素超出边界,可以考虑在父元素中创建一个定位区域,然后在这个区域内使用 `overflow: visible` 属性。具体代码如下:
```css
.parent {
position: relative;
}
.overflow-area {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
overflow: visible; /* 定位区域设置 overflow 属性为 visible */
}
.child {
position: absolute;
top: -20px; /* 子元素超出定位区域顶部 20px */
left: -20px; /* 子元素超出定位区域左边 20px */
}
```
阅读全文