tràn chỉ một phần tử trong DIV

Question

Có cách nào, CSS hoặc JavaScript để cho phép tràn của một phần tử trong DIV, ngay cả khi tràn phụ huynh bị ẩn.

Tôi đã viết thanh trượt jQuery ẩn trang trình bày bằng cách sử dụng 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; 
} 

tôi cần những hình ảnh tràn một cách tự nhiên mặc dù.

Answer 1

Bạn nên xóa position: relative;. Nếu bạn đặt nó trên cùng một phần tử như overflow: hidden;, nó sẽ ẩn phần tử. Nếu bạn thực sự cần nó, hãy thử đặt nó trên bố mẹ của .container (cao hơn trong cây so với phần tử có overflow: hidden).

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>

Answer 2

jQuery Ví dụ

$('.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 
}); 

Lưu ý:

1. Điều này không làm ảnh hưởng đến lề/lề/đường viền, mà là logic cơ bản bạn có thể sử dụng.
2. Thiết lập chiều rộng văn bản tương đương với chiều rộng chứa chỉ mang đến cho nó sự xuất hiện rằng tràn được áp dụng (bạn cũng có thể chỉ cần đặt chiều rộng văn bản div để 500px)

Answer 3

với tuyên bố z-index trong css bạn có thể sử dụng vị trí tuyệt đối để làm điều này.

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

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

bạn có thể đặt lề cho hình nếu vị trí của nó không đúng;