溢出只是一個元件中DIV

有沒有一種方法，CSS或JavaScript允許一個元素的溢流出的DIV，即使其父母溢出是隱藏的。溢出只是一個元件中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; 
}

我需要的圖像，雖然自然溢出。

來源

2012-04-17 Lee Price

我想，除非你改變你的標記的東西是不可能的。設置一個小提琴，顯示所需的效果。 – fcalderan 2012-04-17 14:20:20

你可以使用JavaScript來設置容器的寬度等於圖像的寬度？ – vol7ron 2012-04-17 14:20:26

不可能。 CSS沒有「溢出：隱藏，除了img」。你必須修改標記並添加額外的容器。 – 2012-04-17 14:21:40

，應該刪除position: relative;。如果將它放在與overflow: hidden;相同的元素上，它將隱藏該元素。如果你真的需要它，嘗試（樹高於其overflow: hidden元素）將它放在.container父。

jsFiddle Demo
Explanatory article

#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-17 14:20:28 kapa

這是一個答案...怎麼樣？刪除位置：相對會破壞OP的滑塊。 – 2012-04-17 14:21:59

@MarcB你可能沒有讀過我的答案的擴展版本。 – kapa 2012-04-17 14:24:20

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 
});

注：

這並不需要填充/利潤率/邊境進入的影響，但可以使用的基本邏輯。
設置文本寬度等於容器寬度只給它的溢出應用（你也可以只設置文本的div的寬度500像素）的外觀

來源

2012-04-17 14:22:56 vol7ron

與宣佈的z-index在CSS中，您可以使用絕對位置來執行此操作。

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

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

如果圖像的位置不正確，您可以設置圖像邊距;

來源

2012-04-17 15:06:33

此策略只適用於某些瀏覽器;） – DrewT 2015-05-01 20:48:48

溢出只是一個元件中DIV

回答

相關問題