Thuộc tính định vị trí xác định vị trí tương đối và tuyệt đối cho thành phần, vị trí này phụ thuộc vào giá trị khai báo của thành phần và thành phần bao bên ngoài nó
Vị trí này ban đầu được tính ở phía trên, bên phải, bên dưới và bên trái thành phần
The value of property position
Constructor
- Thuộc tính vị trí đứng độc lập hoặc kèm theo cặp giá trị định vị [theo chiều ngang và theo chiều thẳng đứng]
Vị trí này có thể hiển thị thông qua các thuộc tính vị trí như
- đứng đầu. side location of the component
- bên phải. side location of the section must be
- đáy. set the side position under the component
- bên trái. định vị trí bên trái của thành phần
- Những vị trí này có thể sử dụng giá trị dương hay âm đều được
position : relative; top: giá trị; left: giá trị;
position : relative; top: giá trị; right: giá trị;
position : relative; bottom: giá trị; left: giá trị;
position : relative; bottom: giá trị; right: giá trị;
Chuẩn bị
Tạo tệp HTML và CSS có cấu trúc thư mục và nội dung như sau
Constructor directory
Click vào dấu [+] để xem cấu trúc
viết HTML
tiêu đề trang web
Thành phần A
Thành phần B
Show the browser when not have CSS
Thành phần A
Thành phần B
Để dễ dàng định vị dung thuộc tính, ta sẽ chọn thành phần
and 2 thành phần
has content as after
CSS
* { margin: 0; padding: 0; } div { border: 1px solid red; height: 100px; margin: 30px 40px; } p.tagA { background: #f3f3cf; height: 30px; width: 150px; } p.tagB { background: #e0e0fc; height: 30px; width: 150px; }
Hiện trình duyệt khi chưa sử dụng vị trí
Thành phần A
Thành phần B
Tải xuống phần chuẩn bị
Tới đây ta đã hoàn thành bước chuẩn bị, bắt đầu khám phá thôi
Chức vụ. quan hệ
- Thuộc tính vị trí. quan hệ;
Add intoThành phần A thuộc tính position. quan hệ;
CSS
* { margin: 0; padding: 0; } div { border: 1px solid red; height: 100px; margin: 30px 40px; } p.tagA { background: #f3f3cf; height: 30px; position: relative; width: 150px; } p.tagB { background: #e0e0fc; height: 30px; width: 150px; }
Show the browser when used position relative
Thành phần A
Thành phần B
Nhìn vào kết quả ta thấy hình như không có chuyện gì xảy ra, tuy nhiên khi ta sử dụng vị trí. quan hệ;
Partition
- ①. root for top properties
- ②. root for property right
- ③. root for property bottom
- ④. root for left property
Để hiểu rõ hơn ta hãy thêm vào Thành Phần A các thuộc tính định vị
CSS
* { margin: 0; padding: 0; } div { border: 1px solid red; height: 100px; margin: 30px 40px; } p.tagA { background: #f3f3cf; height: 30px; position: relative; top: 40px; width: 150px; } p.tagB { background: #e0e0fc; height: 30px; width: 150px; }
Show the browser when used top 40px
Thành phần A
Thành phần B
Partition
Thành phần A lúc này đã ở vị trí bên dưới cách vị trí ban đầu một khoảng 40px và màn trập lên Thành phần B, kết quả là do khi sử dụng vị trí. relative;, vùng hiển thị của các phần thành phần đã tách khỏi vùng không gian của nó, khi vùng hiển thị này có thể di chuyển ở bất kỳ vị trí nào tùy thuộc vào các thuộc tính định vị, mặc dù gốc của nó được tính theo
Xem thêm một số ví dụ về vị trí khi bổ sung các thuộc tính định vị
Định vị trí vị trí quan hệ thông qua thuộc tính top và left
* { margin: 0; padding: 0; } div { border: 1px solid red; height: 100px; margin: 30px 40px; } p.tagA { background: #f3f3cf; height: 30px; position: relative; top: 40px; left: 50px; width: 150px; } p.tagB { background: #e0e0fc; height: 30px; width: 150px; }
Show the browser when used top 40px, left 50px
Thành phần A
Thành phần B
Partition
Định vị trí vị trí quan hệ thông qua thuộc tính top và right
________số 8
Show the browser when used top 40px, right 40px
Thành phần A
Thành phần B
Partition
Định vị trí vị trí quan hệ thông qua thuộc tính bottom and left
* { margin: 0; padding: 0; } div { border: 1px solid red; height: 100px; margin: 30px 40px; } p.tagA { background: #f3f3cf; height: 30px; position: relative; bottom: 40px; left: 50px; width: 150px; } p.tagB { background: #e0e0fc; height: 30px; width: 150px; }
Show the browser when used bottom 40px, left 50px
Thành phần A
Thành phần B
Partition
Định vị trí vị trí quan hệ thông qua thuộc tính bottom và right
position : relative; top: giá trị; right: giá trị;0
Show the browser when used bottom 40px, right 50px
Thành phần A
Thành phần B
Partition
Chức vụ. tuyệt đối
Thuộc tính vị trí. tuyệt đối;
- Trường họp 1. Nếu không có thuộc tính định vị [top, right, bottom, left] thì thành phần sẽ lấy gốc theo vùng hiển thị với giá trị mặc định ở trên cùng. 0 và left. 0
CSS
position : relative; top: giá trị; right: giá trị;1
Show the browser when used position. tuyệt đối;
Thành phần A
Thành phần B
Ta thấy Thành phần A lúc này vẫn nằm ở vị trí như ban đầu, tuy nhiên vùng không gian của nó đã được giải nén và Thành phần A đã thoát khỏi vùng không gian của nó, chính vì vậy mà Thành phần B đã sử dụng
CSS
position : relative; top: giá trị; right: giá trị;2
Show the browser
Thành phần A
Thành phần B
- Trường họp 2. Nếu có sử dụng các thuộc tính định vị, thì thành phần sẽ lấy gốc theo vùng không gian của trình duyệt đây cũng chính là vùng văn bản HTML
CSS
position : relative; top: giá trị; right: giá trị;3
View browser display
Partition
- Trường hợp 3. If have an other section in outside the position. relative;] thì gốc của nó [thành phần sử dụng thuộc tính position. tuyệt đối;] sẽ được tính theo vùng hiển thị của thành phần bao bên ngoài nó
Xem ví dụ sau để hiểu rõ hơn. thêm thuộc tính position. quan hệ;
ta có
CSS
position : relative; top: giá trị; right: giá trị;4
Show the browser when used position. quan hệ; . tuyệt đối;
Thành phần A
Thành phần B
Khi sử dụng vị trí. quan hệ;
và sử dụng vị trí. tuyệt đối;
, mối liên hệ này giống như người thả diều [thành phần
] và con diều hâu [Thành phần A], Thành phần B lúc này nằm bên dưới Thành phần A do nó chiếm vị trí không gian của Thành phần A
Thêm thuộc tính định vị trí để hiểu rõ hơn thuộc tính vị trí. tuyệt đối;
Định vị trí định vị. tuyệt đối;
position : relative; top: giá trị; right: giá trị;5
Show the browser when used top 20px, left 30px
Thành phần A
Thành phần B
Partition
Định vị trí định vị. tuyệt đối;
position : relative; top: giá trị; right: giá trị;6
Show the browser when used top 20px, right 30px
Thành phần A
Thành phần B
Partition
Định vị trí định vị. tuyệt đối;
position : relative; top: giá trị; right: giá trị;7
Show the browser when used bottom 20px, left 30px
Thành phần A
Thành phần B
Partition
Định vị trí định vị. tuyệt đối;
position : relative; top: giá trị; right: giá trị;8
Show the browser when used bottom 20px, right 30px
Thành phần A
Thành phần B
Partition
Chức vụ. đã sửa
Thuộc tính vị trí. đã sửa;
CSS
position : relative; top: giá trị; right: giá trị;9
View browser display
Chức vụ. tĩnh
Đây là định dạng định dạng vị trí của thành phần, thường được sử dụng để phục hồi định dạng vị trí cho thành phần