11

有没有办法,CSS 或 JavaScript 允许 DIV 中的一个元素溢出,即使它的父元素溢出是隐藏的。

我编写了一个 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;
}

我需要图像自然溢出。

4

4 回答 4

11

你应该删除position: relative;. 如果将它放在与 相同的元素上overflow: hidden;,它将隐藏该元素。.container如果您确实需要它,请尝试将其放在(在树中高于具有 的元素)的父级上overflow: hidden

jsFiddle Demo
说明文章

#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>

于 2012-04-17T14:20:28.243 回答
0

通过在 css 中声明 z-index,您可以使用绝对位置来执行此操作。

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

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

如果位置不正确,您可以为图像设置边距;

于 2012-04-17T15:06:33.827 回答
0

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. 将文本宽度设置为等于容器宽度只会使它看起来应用了溢出(您也可以将 text-div 的宽度设置为 500px)
于 2012-04-17T14:22:56.750 回答
0

你不能用position: static

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

 .container img{
   z-index:920;
   position:static;
 }
于 2019-07-04T11:37:18.157 回答