CSS: Cách có vị trí: div tuyệt đối bên trong một vị trí: div tương đối không bị cắt bởi một tràn: ẩn trên một container

143

Tôi có 3 cấp độ div:

(Màu xanh lá cây bên dưới) Cấp cao nhất divvớioverflow: hidden . Điều này là do tôi muốn một số nội dung (không hiển thị ở đây) bên trong hộp đó được cắt nếu nó vượt quá kích thước của hộp.
(Màu đỏ bên dưới) Bên này, tôi có divvớiposition: relative . Việc sử dụng duy nhất cho việc này là cho cấp độ tiếp theo.
(Màu xanh lam bên dưới) Cuối cùng, divtôi lấy ra khỏi luồng position: absolutenhưng tôi muốn định vị 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 hộp màu xanh lá cây, nhưng được đặt ở vị trí tương đối với hộp màu đỏ như trong:

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

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

Có cách nào để:

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

Nguồn đầy đủ:

#d1 {
  overflow: hidden;
  background: #efe;
  padding: 5px;
  width: 125px;
}

#d2 {
  position: relative;
  background: #fee;
  padding: 2px;
  width: 100px;
  height: 100px;
}

#d3 {
  position: absolute;
  top: 10px;
  background: #eef;
  padding: 2px;
  width: 75px;
  height: 150px;
}

<br/><br/><br/>
<div id="d1" >
  <div id="d2" >
    <div id="d3"></div>
  </div>
</div>

Mở rộng đoạn trích

css overflow css-position

— avernet
nguồn

44

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

— 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ất) nhưng giữ ẩ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, đúng không?

— Anthony

Anthony, vâng, đây chính xác là nó. Và tôi không quan tâm đến những gì xảy ra với hộp màu đỏ (số 2), thứ chỉ ở đó để tác động lên trên / bên phải trên hộp màu xanh (số 3).

— avernet

2

+1 để giải thích chính xác một câu hỏi mà tôi nghĩ là quá khó để giải thích nhưng thực sự muốn có câu trả lời.

— Andrew Mao

position: fixedsẽ bỏ qua overflow:hiddenbất kỳ phần tử có chứa.

— Kevin Beal

48

Một mẹo có hiệu quả là đặt vị trí hộp số 2 position: absolutethay vì position: relative. Chúng ta thường đặt một position: relativehộp bên ngoài (ở đây là hộp số 2) khi chúng ta muốn một hộp bên trong (ở đây là hộp số 3) với position: absolutevị trí tương đối với hộp bên ngoài. Nhưng hãy nhớ: để hộp số 3 được định vị so với hộp số 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:

Và đây là mã đầ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>

— avernet
nguồn

5

tôi thực sự đã sử dụng position: staticvà điều đó hiệu quả hơn với tôi

— Jason

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

— avernet

1

Bạn có thể giải thích tại sao absolutekhông clip nhưng relativekhông?

— Andrew Mao

1

Giải pháp này sẽ không hoạt động trừ khi bạn biến mọi thứ từ # 1 đến # 3 thành tuyệt đối. Thực tế mà nói, điều này là không thể.

— Windmaomao

1

Tự hỏi mục đích để giải thích một cái gì đó SO trực quan bằng cách sử dụng màu sắc như thế nào ...

— ed1nh0

5

Không có giải pháp kỳ diệu nào để hiển thị thứ gì đó bên ngoài một thùng chứa bị tràn.

Một hiệu ứng tương tự có thể đạt được bằng cách có một div vị trí tuyệt đối phù hợp với kích thước của cha mẹ của nó bằng cách định vị nó bên trong thùng chứa tương đối hiện tại của bạn (div mà bạn không muốn clip nên 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ẻ là 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.

— vise
nguồn

0

Tôi thực sự không thấy một cách để làm điều này như hiện tại. Tôi nghĩ rằng bạn có thể cần xóa overflow:hiddendiv # 1 và thêm div khác trong div # 1 (nghĩa là anh chị em với div # 2) để giữ 'nội dung' không xác định của bạn và overflow:hiddenthay vào đó thêm vào đó. Tôi không nghĩ rằng tràn có thể (hoặc nên có thể) bị quá tải.

— đồ họa
nguồn

0

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

Điều hấp dẫn duy nhất là sau đó bạn sẽ phải loay hoay để đả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>

— Anthony
nguồn