在一个DIV中只溢出一个元素

Question

有没有一种方式，可以使用CSS或JavaScript使一元素在DIV中显示溢出，即使其父元素设置了overflow: hidden。

我编写了一个jQuery轮播图插件，使用overflow: hidden隐藏幻灯片。

<div class="container">
   <img src="image.jpg" />
   <div class="text">
      THIS TEXT IS HIDDEN WHEN POSITIONED OUTSIDE OF .container
   </div>
</div>

CSS：

.container{
    overflow:hidden;
    position: relative;
    width: 500px; height: 250px;
}

我希望图片能够自然地溢出。

- Lee Price

---

我认为除非您更改标记，否则不可能实现。建立一个演示所需效果的Fiddle。 - Fabrizio Calderan

你可以使用 JavaScript 将容器的宽度设置为图像的宽度吗？ - vol7ron

不可能。CSS没有“overflow: hidden except img”的选项。您需要重新设计标记并添加额外的容器。 - Marc B

Answer 1

您应该删除position: relative;。如果您将其放置在与overflow: hidden;相同的元素上，则会隐藏该元素。如果您确实需要它，请尝试将其放置在.container的父级（比具有overflow: hidden的元素更高的位置）。

jsFiddle演示
解释性文章

#wrap { position: relative; }

.container{
    overflow:hidden;
    width: 300px; height: 200px;
    padding: 10px;
    background-color: cyan;
}

.text {
    position: absolute;
    top: 280px; left: 0;
    border: 1px solid red;
}

<div id="wrap">
  <div class="container">
    Container
    <div class="text">Not hidden anymore when positioned outside of .container</div>
  </div>
</div>

- kapa

---

这是一个答案...怎么做呢？移除position: relative会破坏原始问题中的滑块。 - Marc B

@MarcB 你可能没有看到我回答的详细版本。 - kapa

Answer 2

jQuery 示例

$('.text').each(function(){
   var t = $(this);                   // text div
   var c = t.closest('.container');   // container parent 
   var i = c.children('img:first');   // container image
   t.width(c.width());                // set text width = to container width
   c.width(i.width());                // set container width = to text width
});

注意：

1. 这不考虑填充/边距/边框，但这是您可以使用的基本逻辑。
2. 将文本宽度设置为容器宽度仅使其具有应用溢出的外观（您也可以将文本div的宽度设置为500px）

- vol7ron

Answer 3

在 CSS 中声明 z-index，您可以使用绝对定位来实现此目的。

.container{
   z-index:900;
   overflow:hidden;
   width: 500px; 
   height: 250px;
 }

 .container img{
   z-index:920;
   position:absolute;
 }

如果图像的位置不正确，您可以为其设置边距；

- M Rostami

Answer 4

你不能使用position: static来设置图像弹出框。

.container{
   z-index:900;
   overflow:hidden;
   width: 500px; 
   height: 250px;
 }

 .container img{
   z-index:920;
   position:static;
 }

- TLbiz