2013-06-13 21 views
6

"Phần tử được định vị hoàn toàn được định vị tương đối với tổ tiên được định vị gần nhất". - MDN: position - CSSCó thể bỏ qua thì tổ tiên được định vị gần nhất?

Tôi hiểu điều này khi có một phụ huynh được xác định là position:relative; nhưng những gì tôi không nhận ra là position:absolute về mặt kỹ thuật đủ điều kiện là "tổ tiên được định vị".

Đây là mẫu: http://jsfiddle.net/MSzZG/ Sẽ tốt hơn nếu văn bản "Ở trên cùng" có thể có thuộc tính top áp dụng cho cửa sổ thay vì có chứa div nhưng tôi không thể tìm ra nếu có thể bỏ qua.

<div> 
<div>Content 
</div> 
</div> 
<div style="position:absolute;"> 
<div style="position:absolute;top:0px;">At top 
</div> 
</div> 

Có cách nào để bỏ qua một yếu tố tuyệt đối vị trí trước đây (mà không bằng cách sử dụng cố định)? Một giải pháp javascript là chấp nhận được.

+0

bạn đã thử 'cố định' chưa? Điều này sẽ luôn luôn tham chiếu cửa sổ ... – Pevara

+0

@PeterVR - Tôi nhận ra rằng, nhưng vẫn cố định ở lại trong khi cửa sổ được cuộn mà có thể gây ra vấn đề. –

+0

Bạn có thể sử dụng 'float'. Ví dụ: http://jsfiddle.net/MSzZG/1/ –

Trả lời

2

Bạn sẽ phải tính toán sự khác biệt giữa vị trí tự nhiên của vị trí và vị trí mong muốn để đặt nó hoàn toàn trong cửa sổ.

Nếu bạn đang sử dụng jQuery, bạn có thể để nó làm toán cho bạn thông qua hàm .offset(coordinates).

1

Nếu bạn muốn bên trong position: absolute div được định vị tương đối so với cửa sổ (bạn nên chỉ định position: relative bật), bạn không cần lồng nó.

position: absolute LUÔN LUÔN LUÔN sẽ được định vị liên quan đến cha mẹ có bố trí NGAY LẬP TỨC NHẤT (với position: absolute hoặc position: relative). Bạn không thể bỏ qua điều này - bạn chỉ cần cấu trúc HTML của mình tốt hơn hoặc triển khai CSS một cách khác nhau.

Vì vậy, về cơ bản là câu trả lời cho câu hỏi của bạn là không :(ít nhất là không mà không sử dụng vị trí cố định mà bạn đặc biệt đề cập đến không muốn làm.

2

trả lời

số Bạn không thể làm điều đó.

Nếu bạn đã có thể làm được điều đó thì bạn có thể xác định vị trí một div hoàn toàn ra khỏi mẹ. Điều này sẽ không chỉ làm cho phụ huynh "cô đơn", nhưng cũng hoàn toàn đánh bại mục đích của làm tổ. thẻ div lồng nhau hoặc bất kỳ thẻ nào cho vấn đề đó không chỉ được thực hiện cho mục đích thẩm mỹ; nó được thực hiện để truyền đạt văn bản có ý nghĩa với người dùng.

Tôi có thể đề xuất xem xét lại cách tiếp cận của bạn không? Có lẽ nếu bạn giải thích những gì bạn muốn kết quả cuối cùng để trở thành, chúng tôi có thể giúp bạn. chắc chắn phải có một giải pháp.

Giải pháp có thể

  • Nếu bạn cần div bên trong được bố trí ở phía trên sau đó mang nó một mực ra.
  • xóa vị trí tuyệt đối khỏi bố mẹ.
  • Bằng cách sử dụng một phương pháp định vị khác hơn là tuyệt đối.
Các vấn đề liên quan