Vị trí tuyệt đối bên trong vị trí tuyệt đối

Tôi có 3 divyếu tố.

1 divlà lớn hơn (quấn) và cóposition:relative;

divVị trí thứ hai được định vị tuyệt divđối so với vị trí tương đối thứ nhất (và được bao gồm trong vị trí thứ nhất div)

Thứ 3 divđược chứa trong thứ 2 divvà cũng có vị trí tuyệt đối.

<div id="1st">
   <div id="2nd">
     <div id="3rd"></div>
   </div>
</div>

Tại sao divvị trí thứ 3 là tuyệt đối với vị trí thứ 2 div(cũng là vị trí tuyệt đối với vị trí thứ nhất div) mà không phải divlà vị trí thứ nhất lại có vị trí tương đối?

Bởi vì thứ 3 divlà vị trí tuyệt đối đến vị trí thứ 2 tuyệt đối div.

Bởi vì position: absoluteđặt lại vị trí tương đối cho trẻ em giống như position: relativevậy.

Không có cách nào để giải quyết vấn đề này - nếu bạn muốn cái thứ ba divnằm ở vị trí tuyệt đối so với cái đầu tiên, bạn sẽ phải biến nó trở thành con của cái đầu tiên.

Cả hai position:relativevà position:absolutethiết lập chứa các phần tử làm tổ tiên định vị.

Nếu bạn cần div 3 được định vị dựa trên div 1 thì hãy đặt nó trở thành con trực tiếp của div 1.

Lưu ý rằng điều đó position: relativecó nghĩa là phần tử được định vị so với vị trí tự nhiên của nó và position: absolutecó nghĩa là phần tử được định vị so với đầu tiên position:relativehoặc position:absolutetổ tiên của nó .

Vị trí tĩnh: vị trí tĩnh là cách mặc định một phần tử sẽ xuất hiện trong luồng thông thường của tệp HTML của bạn nếu không có vị trí nào được chỉ định.

Chú ý: top, right, bottomvà leftthuộc tính không ảnh hưởng Một tĩnh vị trí ELEMENT.

Vị trí tương đối: việc định vị một phần tử bằng giá trị tương đối giữ cho phần tử (và không gian mà phần tử đó chiếm) trong luồng thông thường của tệp HTML của bạn.

Sau đó bạn có thể di chuyển các phần tử của một số lượng bằng cách sử dụng thuộc tính left, right, topvà bottom. Tuy nhiên, điều này có thể khiến phần tử chồng lên các phần tử khác trên trang — điều này có thể có hoặc có thể không mang lại hiệu quả mà bạn muốn.

Một phần tử được định vị tương đối có thể di chuyển khỏi vị trí của nó, nhưng không gian mà nó chiếm giữ vẫn còn.

Vị trí tuyệt đối: áp dụng giá trị vị trí tuyệt đối cho một phần tử sẽ xóa nó khỏi quy trình bình thường. Khi bạn di chuyển phần tử được định vị tuyệt đối, điểm tham chiếu của nó là trên cùng / bên trái của phần tử chứa gần nhất có vị trí được khai báo không phải là tĩnh — còn được gọi là ngữ cảnh định vị gần nhất của nó. Vì vậy, nếu không có phần tử chứa nào có vị trí khác với tĩnh tồn tại, thì nó sẽ được định vị từ góc trên bên trái của phần tử body.

Trong trường hợp của bạn thùng chứa gần nhất của thứ 3 là thứ 2.

Tuy nhiên, một câu trả lời rõ ràng khác.

Kịch bản hiện tại của bạn là:

#my-parent {position: absolute}
#my-parent .my_child {position: absolute}

Và bạn đang phải vật lộn với nó.

Nếu bạn có thể thay đổi HTML, chỉ cần thực hiện điều này:

#my-parent {position: absolute}
#my-parent .my-wrapper {position: relative}        /* Since you've added the wrapper in HTML */
#my-parent .my-wrapper .my-child {position: absolute}  /* Now you can play with it */

Lý do tại sao divphần tử thứ 3 được định vị tuyệt đối với divphần tử thứ 2 là vì như thông số CSS giải thích ở đây , là bởi vì phần tử "cha" (hay nói hơn là: chứa khối) của một phần tử được định vị tuyệt đối không nhất thiết phải là phần tử cha ngay lập tức của nó, nhưng chứ không phải ngay lập tức nó vị trí nguyên tố tức là bất kỳ yếu tố có vị trí được thiết lập để bất cứ điều gì nhưng staticví dụposition: relative/absolute/fixed/sticky;

Do đó, bất cứ khi nào có thể trong mã của bạn, nếu bạn muốn divphần tử thứ 3 được định vị tuyệt đối so với phần tử thứ nhất, divbạn nên đặt divphần tử thứ 2 làm position: static;giá trị mặc định của nó (hoặc chỉ cần loại bỏ bất kỳ position: ...khai báo nào trong bộ quy tắc của divphần tử thứ 2 của bạn ) .

Trên đây sẽ làm cho 1 divcác khối chứa của 3 vị trí tuyệt đối div, bỏ qua thứ 2 divcho mục đích định vị này.

Hy vọng nó giúp.

Trong trường hợp ai đó vẫn đang tìm kiếm câu trả lời cho điều này.

Tôi đã có thể đạt được kết quả này bằng cách thêm một clear: both;kiểu vào div được định vị hoàn toàn đầu tiên để đặt lại con và cho phép nó sử dụng absoluteđịnh vị của chính nó .