Làm cho con hiển thị bên ngoài một phần bổ sung: cha mẹ ẩn

100

Trong CSS, giá trị overflow:hiddenđược đặt trên các vùng chứa mẹ để cho phép nó mở rộng theo chiều cao của các vùng chứa con nổi của chúng.

Nhưng nó còn có một tính năng thú vị khác khi kết hợp với margin: auto...

Nếu PREVIOUS anh chị em là một phần tử nổi, nó sẽ thực sự xuất hiện liền kề với nó. Nghĩa là nếu anh chị em là anh chị em float:leftthì vùng chứa với float:none overflow:hiddensẽ xuất hiện ở bên phải anh chị em, không có dòng mới - giống như thể nó đang trôi trong dòng chảy bình thường. Nếu là anh chị em trước float:rightđó thì vùng chứa sẽ xuất hiện ở bên trái anh chị em. Thay đổi kích thước vùng chứa này sẽ hiển thị chính xác nó nằm ở tâm giữa các phần tử nổi. Giả sử nếu bạn có hai anh chị em trước đó, float:leftngười kia float:right, vùng chứa sẽ xuất hiện ở chính giữa hai người đó.

Vì vậy, đây là vấn đề ...

Làm cách nào để duy trì kiểu bố cục KHÔNG che trẻ em?

Googling trên khắp trang web cung cấp cho tôi các cách về cách clear:bothmở rộng và mở rộng vùng chứa ... nhưng tôi không thể tìm thấy bất kỳ giải pháp thay thế nào để duy trì căn giữa bên trái / bên phải con trước. Nếu bạn tạo vùng chứa overflow:visiblethì vùng chứa đột nhiên bỏ qua luồng bố trí của các phần tử nổi và xuất hiện nhiều lớp trên phần tử nổi.

Vì vậy, câu hỏi :

Tôi phải có vùng chứa overflow:hiddenđể bảo quản bố cục ...

Làm thế nào tôi có thể làm cho nó để bọn trẻ không bị che mặt? Tôi cần để đứa trẻ được định vị tuyệt đối so với cha mẹ bên ngoài vùng chứa.

HOẶC LÀ

Làm cách nào overflow:visibleđể tôi hoàn toàn có thể định vị một đứa trẻ so với cha mẹ bên ngoài vùng chứa ... YET bảo tồn float-like-layout-flow của anh chị em?

— marknadal
nguồn

86

Bạn có thể sử dụng công clearfixviệc "bảo tồn bố cục" theo cách tương tự overflow: hidden.

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */

thêm class="clearfix"lớp vào cha mẹ và xóaoverflow: hidden;

— Frexuz
nguồn

Hừ! Thông minh, tôi chỉ đang thử nghiệm nó. Những gì tôi hiện đang nhận được là nội dung được tạo hoạt động chính xác, được giữ nguyên trong luồng của bố cục, tuy nhiên phần tử gốc vẫn sẽ bỏ qua nó và xếp lớp trên các phần tử nổi. Tuy nhiên, đây là một ý tưởng rất hay và tôi sẽ chơi với nó nhiều hơn để xem liệu tôi có thể xử lý nó một cách chính xác hay không và quay lại để bỏ phiếu. Cảm ơn bạn :).

— marknadal

@ user1671639, ví dụ của bạn không thực sự áp dụng cho một clearfix. Bạn cần thứ gì đó khác, vì vậy tôi khuyên bạn nên đăng câu hỏi về vấn đề của mình.

— Frexuz

Điều này không hoạt động theo cùng một cách overflow:hidden. Việc áp dụng một clearfix cho div cha không cho phép tất cả các thành phần con được "chứa trong" cùng chiều cao với cha mẹ.

— Khom Nazid

11

Cả hai câu trả lời đã đăng đều không phù hợp với tôi. position: absoluteTuy nhiên, cài đặt cho phần tử con đã hoạt động.

— phản xạ
nguồn

18

Nhưng DIV mẹ sẽ không che giấu nó nếu nó vượt ra ngoài ranh giới của DIV mẹ (có tràn: ẩn)?

— marknadal

9

Afaik thì không, miễn là cha mẹ không có vị trí: họ hàng. Sau đó, phần tử con được định vị tương đối với phần tử tổ tiên được định vị đầu tiên (không phải tĩnh) của nó, đưa nó ra khỏi luồng dom thông thường (của cha mẹ).

— Pim Schaaf

Nếu phụ huynh có vị trí: tương đối và không yêu cầu, bạn có thể đặt vị trí đó: không đặt.

— yeahlad

Đúng, nếu nó position: fixedhoặc được định vị tuyệt đối so với thứ gì đó bên ngoài cha mẹ có visibility: hidden, nó sẽ hiển thị. Tuy nhiên, bạn thường cần (muốn) định vị nó so với phần gốc để có thể thay đổi mã mạnh mẽ hơn. Sau đó, các giải pháp này không phải là một thay thế.

— ArneHugo

10

Đây là một câu hỏi cũ nhưng bản thân mình lại gặp phải.

Tôi có một nửa giải pháp phù hợp với tình huống cho câu hỏi trước đây ("Trẻ em hiển thị trong tràn: phụ huynh ẩn")

Nếu div cha không cần phải là position: relative, chỉ cần đặt các kiểu con thành hiển thị: hiển thị.

Nếu div cha không cần là position: relative, thì cách duy nhất tôi có thể tìm thấy để hiển thị các div con là position: fixed. Điều này có hiệu quả với tôi trong hoàn cảnh của tôi, nhưng tôi sẽ tưởng tượng nó sẽ không hiệu quả với những người khác.

Đây là một ví dụ tồi chỉ cần đăng vào một tệp html để xem.

<div style="background: #ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;">
    <div style="background: #ff0000;position: fixed; top: 10px; left: 10px;">asd
        <div style="background: #00ffff; width: 200px; overflow: visible; position: absolute; visibility: visible; clear:both; height: 1000px; top: 100px; left: 10px;"> a</div>
    </div>
</div>

— Thomas Davis
nguồn

Đây là một ví dụ tồi chỉ cần đăng vào một tệp html để xem. <code> <div style = "background: # ff00ff; Over: hidden; width: 500px; height: 500px; position: relative;"> <div style = "background: # ff0000; position: fixed; top: 10px; left : 10px; "> asd <div style =" background: # 00ffff; width: 200px; tràn: hiển thị; vị trí: tuyệt đối; khả năng hiển thị: hiển thị; rõ ràng: cả hai; chiều cao: 1000px; top: 100px; left: 10px; "> a </div> </div> </div> </code>

— Thomas Davis

4

Cảm ơn bạn đã cố gắng trả lời, nhưng điều này không hiệu quả vì vị trí cố định tự động định vị phần tử so với khung nhìn, có nghĩa là nó không di chuyển cùng với phần tử gốc. Trên thực tế, nếu bạn có một trang cuộn, nó sẽ ở mức 10px, 10px khi bạn cuộn.

— marknadal

"Nếu div mẹ cần là position: relative, thì cách duy nhất có thể tôi thấy để hiển thị cho con là position: fixed." Cảm ơn vì điều đó. Tôi có một bong bóng trợ giúp cửa sổ bật lên cần tràn ngay cả khi phụ huynh có tràn: scroll. Tôi đã kết thúc với một div tuyệt đối, với một bên trong tương đối và sau đó là một vùng nội dung cố định.

— JackMorrissey

Cảm ơn, điều đó đã làm việc cho tôi. Tôi có một phụ huynh với vị trí họ hàng và điều đó là cần thiết vì vị trí của nó được đặt bằng cách sử dụng left. Sử dụng margin-leftthay thế sẽ đạt được hiệu quả tương tự, vì vậy tôi không cần sử dụng vị trí tương đối nữa.

— Felipe Castro

1

Đối với những người khác, nếu clearfix không giải quyết được vấn đề này cho bạn, hãy thêm các lề vào phần anh chị em không trôi nổi mà / giống với (các) chiều rộng của (các) anh chị em được thả nổi.

— Walf
nguồn