Cách dùng position trong css

Hiểu về thuôc tính position trong CSS hoàn toàn có thể là 1 trong những giữa những hưởng thụ trở ngại mang đến họ khi lúc ban đầu.Nó là ở trong tính xác định loại của phương pháp xác định trí mang đến yếu tắc.

Bạn đang xem: Cách dùng position trong css

Cấu trúc:

tag position: giá chỉ trị;

Có 2 loại positioning

Static positioning với relative sầu positioning

Static positoning chỉ có một giá bán trị: position: static. Nó là mang định cần sẽ ít khi thấy nó được knhị báo.

Relative sầu positioning bao gồm những giá trị: relative sầu, absolute, fixed. Các quý giá này can dự với nhau và cho phép bạn dịch rời những nguyên tố bao quanh theo các cách thú vui.

Static Positioning

Mặc cho dù ko liên tục tuy thế thỉnh phảng phất các bạn sẽ thấy nó được knhì báo:

.tag position: static;

*

Static position là position mặc định của số đông nguyên tố, bất kể bạn khai báo hay là không. Tất cả những nhân tố sẽ nằm theo thiết bị từ trong document.

Relative sầu Positioning

Các gía trị của nó là: relative, fixed, absolute, Nó được cho phép các thành phần được xác xác định trí của chính chùng với những trực thuộc tính cha me, trình chú ý...

Tất cả nhiều loại relative sầu positoning bao gồm làm cho nhỏng sau:. Được dịch rời trải qua việc sử dụng offset properties, kia là: top, left, right, bottom.. Chúng ta tạo nên relative-position , nó có thể chấp nhận được thành phần nhỏ cùng với position: absoluteđược định vị tương đối với vị trí của yếu tố này.

Xem thêm: Matlap Là Gì ? Matlab Là Gì, Hướng Dẫn Đầy Đủ Về Matlab

Positon Relative

Cấu trúc:

tag positon: relative; Yếu tố: position: relative của 1 phần tử tương quan đến vị trí hiện nay của nó nhưng mà không biến hóa bố cục xung quanh địa chỉ đó.

Để cụ thể, khi chúng ta thực hiện một offphối để dịch chuyển trực quan liêu 1 phần tử bao gồm position: relative, không khí mà lại nó chỉ chiếm trong document sẽ không di chuyển.

Hãy coi ví dụ:

.ourBox position: relative; top: 20px; left: 20px;

*

Ở phía trên chúng ta có thể thấy phần bên trên của bộ phận được bù trăng tròn px, tương quan đến địa chỉ của phần tử trong luồng thường thì. Điều tương tự đang được vận dụng mang đến phía phía trái.

Lưu ý rằng địa chỉ của các vỏ hộp nghỉ ngơi phía 2 bên không thay đổi. Hãy hãy nhờ rằng, khi chúng ta bù một vị trí phần tử với position: relative, không gian nó chỉ chiếm ko dịch rời, bởi vì vậy nó vẫn giành được tác động mang lại đông đảo sản phẩm công nghệ bao quanh nó.

Nó giống như loại vỏ hộp của công ty chúng tôi tất cả một ý thức tự do với rất có thể đi bất cứ ở đâu nó ý muốn, nhưng luôn luôn luôn tương quan mang lại chỗ ban đầu.

Position Absolute

position: absolute của một phần tử tương quan mang đến vị trí của bố mẹ cùng thay đổi bố cục tổng quan bao bọc địa chỉ đó.

Hãy xem ví dụ sau:

.ourBoxesParent position: relative; .ourBox position: absolute; top: 0; left: 0;

*

Chúng ta vẫn thêm 1 phối vị trị của box position: relative sầu. Chúng ta cũng đã biến đổi bõ của họ sẽ được position: absolute. Bây giờ 2 box sẽ xuất hiên cạnh nhau.

Position Fixed

fixed hệt như absolute tuy vậy tất cả một điểm chính khác nhau:Phần tử được xác định tương đối với form quan sát.

Xem thêm: Họa Sĩ Nguyễn Tư Nghiêm - Tiểu Sử Họa Sỹ Nguyễn Tư Nghiêm

.ourBox position: fixed; top: 0; left: 0;

*

Phần tử được định vị tương đối với cơ chế coi. Điều này Có nghĩa là trong cả Lúc trang được cuộn, thì nó đã nằm luôn bên trên màn hình ngay trên vị trí chuẩn chỉnh kia với đè lên bên trên những phần tử dưới.


Chuyên mục: Blog