Di chuyển hình ảnh lên css
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
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 directoryClick vào dấu [+] để xem cấu trúc viết HTMLtiêu đề trang web Thành phần A Thành phần B Show the browser when not have CSSThà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ệ
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 relativeThà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
Để 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 40pxThà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 50pxThà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 40pxThà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 50pxThà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à rightposition : relative; top: giá trị; right: giá trị;0 Show the browser when used bottom 40px, right 50pxThành phần A Thành phần B Partition Chức vụ. tuyệt đốiThuộc tính vị trí. tuyệt đối;
CSSposition : 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 CSSposition : relative; top: giá trị; right: giá trị;2 Show the browserThành phần A Thành phần B
CSSposition : relative; top: giá trị; right: giá trị;3 View browser display Partition
Xem ví dụ sau để hiểu rõ hơn. thêm thuộc tính position. quan hệ; ta có CSSposition : 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 30pxThà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 30pxThà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 30pxThà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 30pxThành phần A Thành phần B Partition Chức vụ. đã sửaThuộc tính vị trí. đã sửa; CSSposition : 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 |