Syntax:
Position là 1 POPERTY của css language. Được sử dụng khi chúng ta muốn định vị vị trí của các HTML ELEMENT.
Position poperty có 5 values:
position: static; *
position: relative;
position: absolute;
position: fixed;
position: sticky;
Các poperty được sử dụng chung với position là
top: <length>;
left: <length>;
right: <length>;
bottom: <length>;
z-index: <number>;
Cách sử dụng:
Static *
Dấu * cho chúng ta biết static là giá trị mặc định. Nghĩa là phần tử ở đúng luồng thông thường của 1 html document.
Left,top,right,bottom không có tác dụng ở đây.
Relative
Làm thay đổi vị trí của relatived element. Mà không ảnh hưởng đến vị trí của các phần tử khác.
Phần tử được định vị theo 1 hệ tọa độ Oxy với tâm O chính là phần tử, sử dụng poperty top,left,.. để di chuyển phần tử theo các chục.
Absolute
Chuyển phần tử của bạn sang luồng mới. Lúc này bạn có vẻ đang chồng lên luồng ban đầu. Luồng ban đầu không biết về bạn nữa, và cái vị trí lúc đầu phần tử chiếm sẽ bị các phần tử trong luồng đó chiếm.
Để căn chỉnh absolute ta cần biết phần tử cha có position: relative gần nhất của nó. Định vị nó theo hệ tọa độ Oxyz với O là góc trên bên trái của phần tử cha ở trên. Chỉnh tọa độ theo trục z sử dụng z-index.
Fixed
Chuyển phần tử lên luồng mới ,giống như absolute. Điểm khác biệt ở chỗ phần tử này được định vị so với màn hình do đó nó vẫn đứng im cho dù bạn có cuộn trang web lên hay xuống.
Hệ tọa độ để ta định vị phần tử bị fixed Oxyz với tâm O là góc trên bên trái của màn hình.
Sticky
Static là kết quả của 2 poperty hợp lại: relative và fixed.
Nó được định vị relative cho đến khi nó cách vị trí vewport 1 khoảng xác định lúc này nó chuyển sang fixed.
Điểm quan trọng:
Cách trình duyệt tìm width của 1 element khi nó được áp dụng absolute và fixed.
Đầu tiên trình duyệt tìm poperty width của element để lấy width.
Nếu width không được xét thì lúc này width của phần tử bằng đúng width của phần tử con bên trong nó.
Top comments (0)