父级overflow: hidden; 是子级position怎么才能超出来
时间: 2023-06-22 22:22:44 浏览: 110
如果父级元素设置了`overflow: hidden;`,子级元素设置了`position: absolute;`,并且想要子级元素超出父级元素可见范围时,可以使用以下方法:
1. 将子级元素的`z-index`属性设置为一个比父级元素更大的值,例如:
```css
.parent {
position: relative;
overflow: hidden;
}
.child {
position: absolute;
left: 50px;
top: 50px;
z-index: 1; /* 这里设置为 1,比父级元素的 z-index 值大就可以超出来 */
}
```
2. 修改父级元素的`transform`属性,例如:
```css
.parent {
position: relative;
overflow: hidden;
transform: translateZ(0); /* 这里添加一个 translateZ(0),让浏览器开启 GPU 加速 */
}
.child {
position: absolute;
left: 50px;
top: 50px;
transform: translateX(-50px); /* 这里设置一个负值,让子元素超出父元素的左边界 */
}
```
通过以上两种方法,子级元素的部分内容就可以超出父级元素的可见范围了。
阅读全文