Phần tử tuyệt đối định vị CSS, chiều rộng tự động bên ngoài giới hạn của cha mẹ?

Question

Vì vậy, tôi có phần tử cha mẹ của tôi được định vị tương đối, để cho phép một phần tử tooltip được định vị tuyệt đối bên trong, ở trên cùng của nó. Tôi biết rằng bạn được yêu cầu thêm "left: 0, right: 0", để độ rộng của phần tử vẫn có thể được đặt thành tự động, mà tôi đã thực hiện. Tuy nhiên, phần tử cha của tôi có chiều rộng cố định, mà chú giải công cụ sẽ bị hạn chế, vì vậy chiều rộng tự động không thể đi ra ngoài nó, có cách nào xung quanh điều này không?

CSS:

.parent { 
    position: relative; 
    width: 100px; 
    height: 100px; 
} 

.tooltip { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    text-align: center; 
    width: auto; 
    padding: 5px 10px; 
} 

Elements:

<div class="parent"> 
    <div class="tooltip">Text goes here</div> 
</div> 

Không JS xin, tìm kiếm một giải pháp CSS, cảm ơn!

Answer 1

Không đặt cả left và right trên .tooltip, và thiết lập white-space: nowrap nên làm điều đó:

.tooltip { 
    position: absolute; 
    top: 0; 
    left: 0; 
    margin: 0 auto; 
    text-align: center; 
    width: auto; 
    padding: 5px 10px; 
    white-space: nowrap; 
} 

Working example.

Bạn cần sử dụng this solution để căn giữa phần tử tuyệt đối. Nó đòi hỏi một yếu tố bổ sung, mặc dù. Demo

Answer 2

Tôi chưa từng gặp vấn đề này trước đây, nhưng những gì tôi nghĩ đang diễn ra, là width: auto; sẽ tự động kế thừa các thuộc tính của cha mẹ. Vì vậy, hoặc bạn phải đặt một số trong (width: 50px;) hoặc một tỷ lệ phần trăm (width: 50%).

Answer 3

Nếu .parent thể được thực hiện nội tuyến, bạn có thể làm .tooltip render như một bảng và nó sẽ AutoSize để phù hợp với nội dung của nó, nhưng không giống với việc sử dụng white-space:nowrap, nó cũng sẽ hỗ trợ một max-width.

.parent { 
    display: inline; 
    position: relative; 
} 

.tooltip { 
    position: absolute; 
    display: table; 
    top: 0; 
    left: 0; 
    text-align: center; 
    padding: 5px 10px; 
    max-width: 200px; 
}