01/10/2018, 14:42

Nhờ giúp tìm cách tìm ra containing block trong chrome devtool

Dựa trên bài này:

MDN Web Docs

left

The left CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.

Thì thuộc tính left của css tương đối với cái gì, là phụ thuộc vào thuộc tính position, relative thì khác, absolute thì khác.
Ở đây mình quan tâm đến position: absolute, vậy thì nó tương đối với “containing block”. Vậy thì có bài này:

MDN Web Docs

Layout and the containing block

In this article, we examine the factors that an element's containing block.

Nhưng mà nó rối rắm quá
Với lại khi mình cần soi html thì nhiều khi loạn não cả.
Cho nên mình hỏi xem có cách nào để xác định nhanh containing block của một element nào đó không? (Dùng devtool hoặc là jquery gì đó cũng được, nếu là jquery thì mình mong có lệnh query nào đó để mình gõ ở trong console).

viết 16:55 ngày 01/10/2018

Dựa vào link đầu và yêu cầu của bạn thì mình trích đoạn này ra từ link đầu tiên

When position is set to absolute or fixed, the left property specifies the distance between the element’s left edge and the left edge of its containing block. (The containing block is the ancestor to which the element is relatively positioned.)

Quan tâm tới phần trong ngoặc, nó bảo containig block là cha - parent của element nên nếu dùng jquery thì .parent

*grab popcorn* viết 16:44 ngày 01/10/2018

Mình hay làm vầy, mà trước tiên hiểu mấy cái thuộc tính position đã

Absolute: Khi này element sẽ tìm thằng cha nào có thuộc tính position có giá trị là fixed, absolute, relative, sticky. Nếu thầy thằng cha gần nhất có thuộc tính này, nó sẽ gắn tọa độ (0, 0) vào rìa của padding của thằng cha. Tức padding = 10, thì content box bắt đầu ở vị trí (10, 10).
Fixed: Quá rõ ràng, (0, 0) là vị trí của viewport
Relative: Bạn bỏ nó vô chỗ nào thì vị trí (0, 0) nó nằm ở chỗ đó đó. Trôi nổi theo content của bạn. Và nó nằm trong content box của thằng cha.
Sticky: Tương tự relative, nhưng bù lại nó ko thể có vị trí vượt quá content box đó. Tức chỉnh left 1000 thì nó cũng chỉ tới rìa phải của content box là cùng.
Static: Tương tự với relative. Không có tác dụng với left, right, …

Xem vd: https://codepen.io/anon/pen/KQYaMG

Bây giờ thì mở chrome devtool lên. Check vào element muốn tìm containing block.

Element được chọn có position là absolute, thì chỉ cần chọn những thằng cha gần nhất mà có thuộc tính positiion và position value không phải là static thì 99% là ảnh.
Element được chọn ko có thuộc tính position thì ảnh auto static, hoặc position có giá trị là sticky, relative thì cứ trỏ lên thằng cha của nó là xong.
Element là fixed thì rõ ràng. Viewport thẳng tiến :3

Như hình dưới là mình tìm contain block của thẻ div có class absolute, trỏ lên thằng cha thấy nó position là relative. Rồi xem trong ô computed (mấy hình chữ nhật á) xem có padding không bằng cách hover lên là thấy được vị trí gốc của absolute.