CSS: Làm thế nào để có vị trí: div tuyệt đối bên trong một position: relative div không được cắt bởi một overflow: hidden vào một container

108

Tôi có 3 cấp div:CSS: Làm thế nào để có vị trí: div tuyệt đối bên trong một position: relative div không được cắt bởi một overflow: hidden vào một container

(Trong xanh bên dưới) Một cấp cao nhất div với overflow: hidden. Điều này là bởi vì tôi muốn một số nội dung (không được hiển thị ở đây) bên trong hộp đó để cắt nếu nó vượt quá kích thước của hộp.
(Màu đỏ bên dưới) Bên trong này, tôi có div với position: relative. Việc sử dụng duy nhất cho điều này là cho cấp độ tiếp theo.
(Màu xanh bên dưới) Cuối cùng là div Tôi lấy ra khỏi luồng với position: absolute nhưng tôi muốn vị trí tương đối với màu đỏ div (không phải trang).

Tôi muốn có hộp màu xanh được đưa ra khỏi dòng chảy và mở rộng ra ngoài các hộp màu xanh lá cây, nhưng được bố trí tương đối so với hộp màu đỏ như trong:

alt text http://img.skitch.com/20100211-2iejd2t9iabxb2rgs9b6msht2.png

Tuy nhiên, với mã dưới đây, tôi nhận được:

alt text http://img.skitch.com/20100211-mfjtr1st2yy5u4jhc3chi1qi3d.png

Và loại bỏ các position: relative trên hộp màu đỏ, bây giờ hộp màu xanh được phép rời khỏi o f hộp màu xanh lá cây, nhưng không được vị trí nữa so với hộp màu đỏ:

alt text http://img.skitch.com/20100211-e96ktg4j9undir396m4p5ka3ki.png

Có cách nào để:

Giữ overflow: hidden trên hộp màu xanh lá cây.
Hộp màu xanh mở rộng ra ngoài hộp màu xanh lục và được định vị tương đối so với hộp màu đỏ không?

Nguồn đầy đủ, với inline CSS vì lợi ích của thử nghiệm:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <body> 
     <br/><br/><br/> 
     <div id="1" style="overflow: hidden; background: #efe; padding: 5px; width: 125px"> 
      <div id="2" style="position: relative; background: #fee; padding: 2px; width: 100px; height: 100px"> 
       <div id="3" style="position: absolute; top: 10px; background: #eef; padding: 2px; width: 75px; height: 150px"/> 
      </div> 
     </div> 
    </body> 
</html>

Nguồn

2010-02-11 avernet

+26

+1 cho câu hỏi và mã nguồn được định dạng rõ ràng – graphicdivine

Làm rõ: Vì vậy, bạn muốn hộp màu xanh (div bên trong nhất) có thể tràn ra khỏi hộp màu xanh lá cây (div ngoài cùng) nhưng giữ tràn tràn trên hộp màu xanh lá cây? Vì vậy, về cơ bản, có tràn ẩn trên tất cả mọi thứ trong hộp màu xanh lá cây NGOẠI TRỪ hộp màu xanh, phải không? – Anthony

Anthony, vâng, đây chính là nó. Và tôi không quan tâm về những gì xảy ra với hộp màu đỏ (# 2), mà chỉ là có ảnh hưởng đến đầu/phải trên hộp màu xanh (# 3). – avernet

Bí quyết hoạt động là đặt hộp số 2 với position: absolute thay vì position: relative. Chúng tôi thường đặt position: relative trên một hộp bên ngoài (ở đây hộp # 2) khi chúng tôi muốn một hộp bên trong (ở đây hộp # 3) với position: absolute được định vị tương đối so với hộp bên ngoài. Nhưng hãy nhớ: đối với ô # 3 được định vị tương đối so với hộp # 2, hộp số 2 chỉ cần được định vị. Với sự thay đổi này, chúng tôi nhận được: alt text http://img.skitch.com/20100211-k9ksqaq4a46cpfjasitf1h4ayx.png

Và đây là đoạn code đầy đủ với sự thay đổi này:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <style type="text/css"> 

      /* Positioning */ 
      #box1 { overflow: hidden } 
      #box2 { position: absolute } 
      #box3 { position: absolute; top: 10px } 

      /* Styling */ 
      #box1 { background: #efe; padding: 5px; width: 125px } 
      #box2 { background: #fee; padding: 2px; width: 100px; height: 100px } 
      #box3 { background: #eef; padding: 2px; width: 75px; height: 150px } 

     </style> 
    </head> 
    <body> 
     <br/><br/><br/> 
     <div id="box1"> 
      <div id="box2"> 
       <div id="box3"/> 
      </div> 
     </div> 
    </body> 
</html>

tôi thêm biết thêm chi tiết về vấn đề này trên Absolutely positioned box inside a box with overflow: auto or hidden.

Nguồn

2010-02-11 18:33:10 avernet

tôi thực sự đã sử dụng 'vị trí: tĩnh' và điều đó làm việc tốt hơn cho tôi – Jason

@ Jason, rất thú vị; vì vậy bạn đang nói rằng bạn sử dụng 'position: static' trên hộp # 2 thay vì' position: absolute'. – avernet

yep ... đã hoạt động rất tốt. – Jason

Tôi không thực sự nhìn thấy một cách để làm điều này như-là. Tôi nghĩ bạn có thể cần phải xóa overflow:hidden từ div # 1 và thêm một div khác trong div # 1 (ví dụ như anh chị em vào div # 2) để giữ 'nội dung' không xác định của bạn và thêm overflow:hidden vào thay thế đó. Tôi không nghĩ rằng tràn có thể được (hoặc có thể được) over-ridden.

Nguồn

2010-02-11 09:14:24 graphicdivine

Không có giải pháp huyền diệu nào để hiển thị nội dung nào đó bên ngoài vùng chứa bị ẩn.

Có thể đạt được hiệu ứng tương tự bằng cách có div vị trí tuyệt đối phù hợp với kích thước của bố cục bằng cách định vị nó trong thùng chứa tương đối hiện tại của bạn (div bạn không muốn cắt phải nằm ngoài div này):

#1 .mask { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    z-index: 1; 
    overflow: hidden; 
}

Hãy nhớ rằng nếu bạn chỉ phải cắt nội dung trên trục x (có vẻ như trường hợp của bạn, vì bạn chỉ đặt chiều rộng của div), bạn có thể sử dụng overflow-x: hidden.

Nguồn

2010-02-11 09:19:29 vise

Nếu có nội dung khác không được hiển thị bên ngoài div (hộp màu xanh lá cây), tại sao không có nội dung đó được bao bọc bên trong div khác, hãy gọi nó là "content". Có tràn ẩn trên bên trong-div mới, nhưng giữ tràn có thể nhìn thấy trên hộp màu xanh lá cây.

Điều duy nhất là bạn sẽ phải làm lộn xộn xung quanh để đảm bảo rằng div nội dung không can thiệp vào vị trí của hộp màu đỏ, nhưng có vẻ như bạn sẽ có thể khắc phục điều đó với một chút đau đầu.

<div id="1" background: #efe; padding: 5px; width: 125px"> 
    <div id="content" style="overflow: hidden;"> 
    </div> 
    <div id="2" style="position: relative; background: #fee; padding: 2px; width: 100px; height: 100px"> 
     <div id="3" style="position: absolute; top: 10px; background: #eef; padding: 2px; width: 75px; height: 150px"/> 
    </div> 
</div>

Nguồn

2010-02-11 09:21:41 Anthony

CSS: Làm thế nào để có vị trí: div tuyệt đối bên trong một position: relative div không được cắt bởi một overflow: hidden vào một container

Trả lời

Các vấn đề liên quan