Html 将PNG图像放置在div旋转木马中

经过几次搜索，我找不到一个我想做什么的例子。 我有一个旋转木马，我的任务是在旋转木马中放置一个png图像，如下所示：

正如您所看到的，png从div的顶部略微超出

这是我已经尝试过的：

但是，正如您所看到的，当我制作一个否定像素时，png图像的边界不再可见

我使用位置：绝对；在我的png图像上，位置：相对；在旋转木马上，但似乎不起作用。我不知道我是应该对旋转木马的div采取行动，还是应该对已经处于相对状态的图像的div采取行动

HTML:

自由放任者！

现代世界和威尼斯的压力，以及法国国家研究所的压力。你可以在环境平静和舒适的情况下工作

旋转木马演示{ 字体系列：main、Palatino-Linotype、bookantica、Palatino、serif； 填充：0； 颜色：5656； 背景色：FFF989； 位置：相对位置； } .女人{ 利润上限：-600px； } 旋转木马演示文稿h2{ 字号：2rem； 文本转换：大写； } @仅介质屏幕，最大宽度：780px{ 旋转木马演示文稿h2{ 字体大小：1.5rem； } } @仅介质屏幕，最大宽度：560像素{ 旋转木马演示文稿h2{ 字号：1rem； 文字装饰：下划线； } 旋转木马演示文稿{ 字号：1rem； } } 我想知道是否存在一个简单的解决方案，如javascript中的canvas或CSS，来管理这种类型的定位？

第25行的carousel.scs中有一个溢出：隐藏规则，用于隐藏图像

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
  @include clearfix();
}

您可以使用更具体的选择器来覆盖溢出：

div.carousel-inner { overflow: visible }

检查代码笔中的fork：