Ghi đè tràn: ẩn

Question

Tôi có vùng chứa chính với nhiều phần tử con. Vì lý do hoạt ảnh (các phần tử con trượt vào và ra khỏi bố mẹ), tôi đã đặt thuộc tính overflow thành hidden.

Điều này làm việc tuyệt vời nhưng có một vài trẻ em mà tôi muốn hiển thị bên ngoài giới hạn của phụ huynh.

Làm cách nào để tạo điều kiện để chỉ một số trẻ em nhất định có thể nhìn thấy bên ngoài giới hạn của phụ huynh?

Answer 1

Trả lời là: Bạn không thể. Cha mẹ có overflow:hidden thì tất cả các phần tử con sẽ bị cắt bớt hoặc bạn có overflow:(visible|auto|scroll|...) thì tất cả trẻ em đều được điều trị theo quy tắc đó. Không có khả năng bạn có thể kết hợp các tiểu bang - tất cả trẻ em đều được đối xử bình đẳng.

Tuy nhiên, bạn có thể giới thiệu thêm container yếu tố bên trong phụ huynh (mà không còn có overflow: hidden) như trong này pseudo-code:

<parent>  
    <container1 style="overflow:hidden"> 
     <!-- these will be clipped --> 
     <element> 
     <element> 
    </container> 

    <container2 style="overflow:visible"> 
     <!-- these will be shown --> 
     <element> 
     <element> 
    </container> 
</parent> 

chỉnh sửa: example

Answer 2

Khi có cuộc thảo luận nhiều hơn với OP, câu trả lời này không hữu ích. Thay vào đó, hãy xem các bình luận để làm rõ với OP.

Thứ nhất, sẽ giúp ích nếu bạn bao gồm một số mã cụ thể.

quát nói, cung cấp một selector CSS đó là cụ thể hơn cho đứa trẻ so với cái mà đặt overflow: hidden;

Ví dụ,

Kiểu:

.hide-children div {overflow: hidden;} 
.hide-children div.show-me {overflow: none;} 

HTML:

<div class="hide-children"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child show-me"></div> 
</div> 

Nhưng như tôi đã nói, chỉ sau một số mã mẫu có thể cung cấp câu trả lời có ý nghĩa hơn.

Answer 3

Đối với tôi Tôi nhận được xung quanh nó bằng cách làm cho cha mẹ với tràn: ẩn lớn hơn và sau đó đưa ra lề trừ các yếu tố xung quanh.