CSS 如何在父元素使用overflow:hidden的情况下使子元素可见

在本文中，我们将介绍如何在使用CSS的情况下，让一个子元素在父元素设置为overflow:hidden时依然可见。

阅读更多：CSS 教程

使用绝对定位

一种常见的方法是使用绝对定位来使子元素可见。首先，将父元素的position属性设置为relative，然后将子元素的position属性设置为absolute。此外，我们需要使用z-index属性来确保子元素显示在父元素之上。下面是一个简单的示例：

.parent {
  position: relative;
  overflow: hidden;
  height: 100px;
  width: 200px;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  z-index: 1;
}

在上面的示例中，父元素拥有一个指定的高度和宽度，并设置了overflow:hidden的属性。子元素使用绝对定位，并且宽高设置为100%以填满整个父元素。通过设置z-index为1，子元素将显示在父元素之上。

使用负边距

另一种方法是使用负边距来使子元素可见。我们可以使用负边距将子元素向外推出父元素的可视区域。下面是一个示例：

.parent {
  overflow: hidden;
  height: 100px;
  width: 200px;
}

.child {
  margin-top: -50px;
  background-color: red;
}

在上面的示例中，父元素的高度和宽度已经指定，并设置了overflow:hidden的属性。子元素使用负边距设置了一个与父元素高度一半相等的负值，使其向上移动到父元素的可视区域之外。这样，尽管父元素设置了overflow:hidden，子元素依然可见。

使用伪元素

还有一种方法是使用伪元素来使子元素可见。通过在父元素内部创建一个伪元素，并将其放置在子元素的下方，我们可以实现子元素的可见性。下面是一个示例：

.parent {
  position: relative;
  overflow: hidden;
  height: 100px;
  width: 200px;
}

.parent:before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
}

.child {
  background-color: red;
}