Chiều rộng của div với vị trí tuyệt đối phụ thuộc vào chiều rộng của bố mẹ nó?

Question

Tôi muốn có chiều rộng của div với vị trí tuyệt đối tùy thuộc vào nội dung của nó thay vì bố cục của nó. Ví dụ,

<div style="position:absolute"> 
<div style="position:absolute"> 
    <div style="position:absolute">Div in Div</div> 
</div> 
</div> 

sẽ gây ra ngắt từ như trong http://jsfiddle.net/ymgfN/2/

Dường như chiều rộng div bên trong sẽ phụ thuộc vào chiều rộng mẹ của nó, cho dù vị trí của nó là tuyệt đối. Ví dụ: nếu chúng tôi chỉ định chiều rộng cho phụ huynh, nó sẽ hoạt động như mong đợi (không có từ bọc): http://jsfiddle.net/ymgfN/3/

Thật không may, tôi không thể xác định chiều rộng của cha mẹ - cuối cùng tôi sẽ có chiều rộng phụ thuộc vào con cái của nó. Và, tôi phải sử dụng vị trí tuyệt đối. Có thể trong CSS thuần túy không?

---

Một số nền: Tôi không cố gắng tạo trang để hoàn thành một số thiết kế - Tôi biết thật điên rồ khi có ba vị trí tuyệt đối xếp chồng lên nhau cho bất kỳ nhu cầu hợp lý nào. Thay vào đó, tôi đang thực hiện một số thử nghiệm để xem liệu vị trí tuyệt đối có thể là một cách tiếp cận chung để giải quyết một loạt các vấn đề bố trí (bố cục phức tạp linh hoạt thường đòi hỏi sử dụng thông minh tĩnh/tuyệt đối/float). Thật không may, tôi chạy vào vấn đề này mà sẽ làm cho ý tưởng của việc sử dụng vị trí tuyệt đối ở khắp mọi nơi ngu ngốc.

Answer 1

Phần tử có chiều rộng và chiều cao trước phần tử này bị xóa khỏi luồng tài liệu. Khi bạn định vị hoàn toàn phần tử bên ngoài, nó sẽ bị xóa khỏi luồng và vì nó không có nội dung ngay lập tức, nó có chiều rộng là 0 và chiều cao là 0. Do đó, một phần tử phân chia khác bên trong nó cố gắng thêm văn bản thừa hưởng chiều rộng của cha mẹ là 0 Vì vậy, nó chỉ sẽ mở rộng đến chiều rộng của từ dài nhất để cho phép nội dung, và sau đó phá vỡ tất cả mọi thứ khác để dòng mới. Sau nó được thực hiện điều đó, nó loại bỏ các yếu tố từ dòng chảy của tài liệu được tắt ngày của riêng mình. Vì vậy, để trả lời câu hỏi đầu tiên của bạn, có, một phần tử được định vị hoàn toàn chú ý đến thứ nguyên của phần tử gốc nếu bạn không chỉ định chiều rộng và/hoặc chiều cao trên chính phần tử đó. Bạn có biết chiều rộng của con bạn được cho là gì không?

Đối với câu hỏi thứ hai của bạn ... bạn có thể sử dụng white-space: nowrap. Không thực sự là một giải pháp tuyệt vời. Tốt hơn nữa, hãy tìm cách tốt hơn để tổ chức nội dung của bạn, do đó bạn không cần ba phần tử được định vị hoàn toàn được lồng vào nhau. Bạn nói rằng bạn có để sử dụng chúng ... Thật sao? Có nhiều khả năng là bạn không tìm được cách tốt hơn để làm điều đó, nhưng đó là câu hỏi khác nếu bạn chọn đi xuống con đường đó.

Answer 2

Yếu tố mức khối với position: absolute hoặc fixed tự động được liên kết với chiều rộng của cha mẹ nếu không có cố định width được đặt. Nếu bạn không muốn chiều rộng cố định cho phần tử con, bạn có thể thực hiện công việc này một cách hiệu quả bằng cách cho nó một số rất cao margin-right, ví dụ:

.inner-div { 
    position: absolute; 
    margin-right: -10000px; 
} 

Sau đó, chiều rộng của nó sẽ bị ràng buộc với chiều rộng của cha mẹ trừ đi lề âm, vì vậy trong thực tế sẽ chỉ phụ thuộc vào nội dung của nó.

Cập nhật fiddle: http://jsfiddle.net/ymgfN/53/