phần tử lực để hiển thị bên ngoài tràn: ẩn

Question

Điều này có thể là không thể thực hiện được, nhưng tôi muốn hiển thị phần tử bên ngoài phần tử là overflow: hidden. Tôi biết rằng không có ý nghĩa và mọi thứ đang làm việc như họ cần, nhưng chỉ muốn kiểm tra lại để xem nếu có một cách.

mô tả tốt nhất với mã này:

.outer { 
 
    position: fixed; 
 
    top: 30px; 
 
    left: 50px; 
 
    overflow: hidden; 
 
    height: 30px; 
 
    width: 300px; 
 
    background: red; 
 
} 
 

 
.inner { 
 
    position: relative; 
 
} 
 

 
.show-up { 
 
    width: 100px; 
 
    height: 300px; 
 
    background: green; 
 
    position: absolute; 
 
    left: 20px; 
 
    overflow: visible; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    <div class="show-up">this needs to show up ALL 300 pixels high of it</div> 
 
    </div> 
 
</div>

View on JSFiddle

Answer 1

Các overflow:hidden định nghĩa sẽ giấu bất cứ điều gì bên trong đó yếu tố đó vượt ra ngoài giới hạn của nó.

Tùy thuộc vào ứng dụng cụ thể của bạn, bạn có thể sử dụng một cấu trúc như thế này:

.container { 
 
    position: fixed; 
 
    top: 30px; 
 
    left: 50px; 
 
    height: 30px; 
 
    width: 300px; 
 
    background: red; 
 
} 
 
.outer { 
 
    overflow: hidden; 
 
} 
 
.inner { 
 
    position: absolute; 
 
} 
 
.show-up { 
 
    width: 100px; 
 
    height: 300px; 
 
    background: green; 
 
    position: relative; 
 
    margin-left: 20px; 
 
}

<div class="container"> 
 
    <div class="outer"> 
 
    <div class="inner"></div> 
 
    </div> 
 
    <div class="show-up">this needs to show up ALL 300 pixels high of it</div> 
 
</div>

View on JSFiddle

Answer 2

hãy kiểm tra các fiddle sau tôi đã tạo: http://jsfiddle.net/NUNNf/12/

Bạn nên thêm một thùng chứa bên ngoài như ví dụ :

<div class="container"> 
<div class="outer"> 
    <div class="inner"> 

    </div> 
</div> 
<div class="show-up">this needs to show up ALL 300 pixels high of it</div> 

</div> 

và sau đó thêm các yếu tố bên trong