css中父元素overflow:hidden,子元素position:absolute,怎么让子元素超出父元素边界还能显示？

可以尝试使用父元素的 `overflow: visible` 属性，这样子元素就可以超出父元素的边界并且显示出来了。具体代码如下：

.parent {
  position: relative;
  overflow: visible; /* 父元素的 overflow 属性设置为 visible */
}

.child {
  position: absolute;
  top: -20px; /* 子元素超出父元素顶部 20px */
  left: -20px; /* 子元素超出父元素左边 20px */
}

当然，如果你需要在父元素的一部分区域内让子元素超出边界，可以考虑在父元素中创建一个定位区域，然后在这个区域内使用 `overflow: visible` 属性。具体代码如下：

.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 */
}

相关问题

外层设置了overflow:hidden,内层其中一个元素设置定位怎么显示在外层的侧边上

当外层容器设置了`overflow: hidden;`，意味着它会隐藏溢出的内容。如果你想要让内部定位元素（如`position: absolute`或`position: fixed`）显示在边沿，尽管外层容器看不见它们，你可以采取以下策略：

1. **利用相对定位（position: relative;）**: 让外层元素设置为`relative`，然后内部定位元素相对于外部元素定位。例如：

   <div style="position: relative; overflow: hidden;">
     <div style="position: absolute; top: 0; left: 0;">内容</div>
   </div>

2. **使用绝对定位（position: absolute;）**: 设置内部元素的`top`和`left`属性值为负值，使其超出父容器边界，达到边缘位置：

   <div style="overflow: hidden;">
     <div style="position: absolute; top: -10px; left: -10px;">内容</div>
   </div>

这里负值大小取决于你的布局需求和元素大小。

3. **利用`clip`属性**: 可以设置`clip`属性限制内部元素的可视区域，使其看起来像是从边缘伸出的：

   .inner {
     position: absolute;
     clip: rect(0, auto, auto, -10px); /* 拖动元素宽度，高度自适应 */
   }

记得根据实际场景调整数值，以确保元素准确地显示在期望的位置上。

父级overflow: hidden; 是子级position怎么才能超出来

如果父级元素设置了`overflow: hidden;`，子级元素设置了`position: absolute;`，并且想要子级元素超出父级元素可见范围时，可以使用以下方法：

1. 将子级元素的`z-index`属性设置为一个比父级元素更大的值，例如：

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

.child {
  position: absolute;
  left: 50px;
  top: 50px;
  z-index: 1; /* 这里设置为 1，比父级元素的 z-index 值大就可以超出来 */
}

2. 修改父级元素的`transform`属性，例如：

.parent {
  position: relative;
  overflow: hidden;
  transform: translateZ(0); /* 这里添加一个 translateZ(0)，让浏览器开启 GPU 加速 */
}

.child {
  position: absolute;
  left: 50px;
  top: 50px;
  transform: translateX(-50px); /* 这里设置一个负值，让子元素超出父元素的左边界 */
}

通过以上两种方法，子级元素的部分内容就可以超出父级元素的可见范围了。