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; 是子级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); /* 这里设置一个负值，让子元素超出父元素的左边界 */
}

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

子元素有弧度，父元素无弧度，但是父元素遮挡住了子元素的弧度，在css如何处理

在CSS中，父元素默认会遮挡子元素的弧度。要解决这个问题，可以使用下面的方法之一：

1. 使用 `overflow: hidden;` 属性：将父元素的 `overflow` 属性设置为 `hidden`，这样父元素会裁剪超出其边界的子元素内容，从而显示出子元素的弧度。

2. 使用 `position: relative;` 属性：将父元素的 `position` 属性设置为 `relative`，然后将子元素的 `position` 属性设置为 `absolute`，并使用适当的 `z-index` 值来确保子元素位于父元素之上。这样子元素就可以突破父元素的边界显示其弧度。

3. 使用 `clip-path` 属性：将父元素的 `clip-path` 属性设置为与子元素的弧度相匹配的值，可以是圆形、椭圆形或自定义形状。这样父元素就会被剪切成与子元素相同的形状，从而显示出子元素的弧度。

请注意，在使用 `overflow: hidden;` 或 `clip-path` 属性时，确保父元素和子元素都有足够的空间来显示其内容和弧度效果，否则可能会被裁剪或隐藏。