Position Relative Là Gì

     

Trong CSS, khi bạn di chuyển bất cứ một phần tử như thế nào bằng những thuộc tính về Box model như margin hoặc float thì các phần từ cạnh bên nó đông đảo sẽ bị ảnh hưởng. Lấy ví dụ bạn sử dụng marginđể chuyển phần tử A thì loại thằng bên cạnh nó cũng trở nên di gửi theo và toàn bộ các phần tử khác các sẽ bị ảnh hưởng theo.

Bạn đang xem: Position relative là gì


Vậy trường hợp như bạn muốn di chuyển một phần tử nào đó mà không ảnh hưởng đến bố cục của trang web thì sẽ có một phương án đó là sử dụng thuộc tính position. Cái tên nói lên vớ cả, positionlà thuộc tính góp bạn tùy chỉnh khu vực hiển thị dồn phần tử với việc thiết lập này không còn làm ảnh hưởng đến các phần tử khác.

Các quý giá của ở trong tính position

Hiện tại position hỗ trợ cho một vài giá trị như sau:


relative:Dùng để thiết lập một trong những phần tửsử dụng những thuộc tính position (xem ngơi nghỉ dưới) nhưng mà không làm ảnh hưởng đến bài toán hiển thị ban đầu.absolute: cần sử dụng để tùy chỉnh cấu hình vị trí của 1 phần tử cơ mà nó sẽ luôn luôn nằm trong một phần tử chị em đang là relative.fixed: Hiển thị luôn đi theo trình phê duyệt khi cuộn trang.static: Đưa bộ phận về hiển thị theo kiểu mặc định.

Sau khi thiết lập một trong những phần tử sử dụng position, bọn họ sẽ sử dụng thêm một số trong những thuộc tính position để căn chỉnh vị trí của nó và quý hiếm là số kèm theo 1-1 vị, gồm 4 nằm trong tính position là:

top: Căn vị trí hiển thị của phần tử theo hướng từ bên trên xuống dưới. Giá bán trị càng cao thì thành phần càng thụt xuống dưới.bottom: Căn địa điểm hiển thị của bộ phận theo phía từ bên dưới lên trên. Giá bán trị càng tốt thì thành phần càng hiển thị lên cao.left: Căn địa chỉ hiển thị trường đoản cú trái thanh lịch phải. Giá chỉ trị càng cao thì thành phần sẽ càng thụt về bên phải.right: Căn địa chỉ hiển thị từ buộc phải sang trái. Giá chỉ trị càng tốt thì phần tử sẽ càng thụ về bên cạnh trái.

Ví dụ về kiểu dáng relative

Ở lấy một ví dụ này, mình sẽ cho cái hình ảnh hiển thị theo phong cách relative và sử dụng thuộc tính position nhằm nó hiển thị đè lên văn bản.


Ví dụ về kiểu absolute

Với absolute, mình nên có 1 phần tử người mẹ là kiểu dáng relative. Hôm nay giá trị thấp độc nhất của nó sẽ tính từ lề của phần tử mẹ. Ví dụ như ở dưới, vùng red color là vùng được thiết lập kiểu relative, còn hình ảnh sẽ là hình dạng absolute. Lúc mình đưa các thuộc tính position về quý hiếm là 0 thì nó vẫn nằm trong bộ phận mẹ.

Ví dụ về vẻ bên ngoài fixed

Ở lấy ví dụ như này, mình sẽ tạo ra một chiếc danh sách, tiếp đến đưa các mục con phía bên trong thành hình trạng inline cùng position giao diện fixed nhằm nó luôn luôn đi theo trình coi ngó khi kéo thanh cuộn.


Lời kết

Thế lý do mình lại phân tích và lý giải cặn kẽ về position như vậy, nó đặc biệt quan trọng lắm sao? tương đối là đặc trưng sau này, mà ví dụ là trước mắt ở đoạn sau mình đã bày cho bạn một vài ba kỹ thuật làm cho menu đổ xuống bao gồm phân cấp và trong đó sẽ thực hiện thuộc tính position tương đối nhiều và nó hiển thị giỏi hay ko là đặc biệt quan trọng bạn có tùy chỉnh thiết lập đúng đẳng cấp position tuyệt không. Cùng tương lai các bạn còn dùng các nữa cho nên hãy nắm rõ ngay lập tức từ bây giờ.


Xem tiếp bài xích trong seriePhần trước: Tùy biến hóa loại bộ phận với displayPhần kế tiếp: Một vài ba Pseudo Class đơn giản
csscss cơ bảncss layoutvideo phía dẫn
*
Reply
*
0
*
0
*
phân chia sẻ

*

Yyds tức thị gì

Nếu thường xuyên sử dụng social Trung Quốc, chắc rằng các các bạn sẽ gặp phải một số trong những từ thân thuộc nhưng lại ko đoán được ý nghĩa. Bài dưới ...


*

Nem cua biển hải phòng nơi đâu ngon
*

Thiên vị giờ Trung là gì

Ngoài bài toán ghi nhớ từ vựng giờ đồng hồ Trung theo chủ thể nhất định, cách thức học giờ Trung theo một số trong những cụm từ bỏ hay các câu khẩu ngữ cũng là 1 trong ...


*

Tài sản được phép thanh toán là gì

Theo nguyên tắc tại Điều 105 Bộ công cụ Dân sự 2015, gia tài là vật, tiền, sách vở và giấy tờ có giá cùng quyền tài sản.Sự ghi nhận gia sản là vật bắt đầu từ những ...


Hỏi ĐápLà gìNgôn ngữ Dịch
*

Làm giấy tờ thủ tục bảo hiểm thất nghiệp nghỉ ngơi đâu
Hỏi ĐápỞ đâu
Band điểm IELTS là gì

Nội dungIELTS là gì?Bằng IELTS có hiệu lực hiện hành trong bao lâu?Lợi ích của việc có IELTS band không thực sự thấp1. Được miễn thi tốt nghiệp thpt về phần nước ngoài ngữ2. Du ...


Skincare như vậy nào

Skincare là 1 thuật ngữ nói về việc chăm sóc da, nhiều bạn khi gặp gỡ các về domain authority như mụn, nám, sạm, lão hóa, thì có xu thế tìm kiếm các kiến thức về da ...

Xem thêm: So Sánh Iphone X Với Xs Max, Đâu Là Điểm Khác Biệt Giữa Iphone Xs Và Iphone X


Nhập mã mời của báo hay 24h sống đâu

Việc cập nhật các tin tức từng ngày là nhu cầu quan trọng của bất cứ ai trong mỗi chúng ta. Với Báo tốt 24h, bạn vừa không bỏ lỡ ngẫu nhiên một sự kiện ...


Tại sao các bạn chọn nghề sale

Đây sẽ đó là 5lý do bạn mong muốn chọn nghề sale. Nghề sale là gì? làmột nghề rất khắt khe và bạn phải có những nguyên nhân đủ khủng để rất có thể ...


Cấp phối đá dăm một số loại 1 giờ đồng hồ anh là gì

Thuật ngữ chuyên môn (Technical Terms) tế bào tả những hạng mục thanh toán giao dịch (Pay Items) bằng tiếng Việt và tiếng Anh (Việt - Anh) chăm ngành xây dựng cầu đường ...


Giáp Ngọ từng nào tuổi

Người tuổi Ngọ là giữa những người thông minh nhanh nhạy và được review cao trong công việc cũng như được thương mến trong cuộc sống đời thường hàng ngày. Vậy ...


Servings là gì

Kiến thức phổ biến , luyện tập thể thao , tất cả bài viếtHiểu đúng về thành phần dinh dưỡng trên bao bì sản phẩmHiện nay, phần đông người chi tiêu và sử dụng ở ...


This is my father tức là gì

Chủ đề: This is my father Đây là ba tôi.Mục tiêu giao tiếp: Học biện pháp sử dụng cấu tạo câu đơn giản và dễ dàng để chỉ ra những thành viên trong gia đình.Mục tiêu ngôn ...


Quận Thủ Đức cơ bao nhiêu Trường THCS

Chúng tôi xin gợi nhắc đến quý bố mẹ danh sách các trường thcs tại quận Thủ Đức. Đây là các trường trung học cơ sở công lập, quý phụ huynh có thể tham khảo để con ...


Cách chất vấn fb đăng nhập ở đâu

Cứ năm người lại sở hữu một tín đồ tự dìm họ thâm nhập ngầm đăng nhập vào thông tin tài khoản Facebook của bạn khác. Vì chưng vậy, Facebook được cho phép người dùng track gần như ...


Diễn họa 3 chiều là gì

Tin thị trườngTin chăm mônTin nội bộĐộ nén thị phần bất hễ sản và hầu như thông tin trông rất nổi bật thời gian vừa quaGAM MÀU NÀO cho BỨC TRANH BẤT ĐỘNG ...


Mua vỏ collagen làm cho xúc xích nghỉ ngơi đâu

Vỏ xúc xích làm từ đâu? bao gồm những ưu điểm gì? Liệu có an ninh với sức mạnh không? Mua nơi đâu uy tín? có lẽ rằng đang là thắc mắc của tương đối nhiều người. Bài bác ...


Bánh trung thu như lan buôn bán ở đâu

Home - siêu thị bánh trung thu - 3 shop bánh trung thu Như Lan chủ yếu hãng trên TPHCM3 shop bánh trung thu Như Lan thiết yếu hãng tại TPHCMNếu tất cả đi ngang qua tuyến đường ...

Xem thêm: Zalopay Là Gì - Giới Thiệu Về Zalopay


Bằng cao đẳng nghề giờ Anh là gì

Cao đẳng ngôn ngữ AnhChương trình đào tạo ngành giờ đồng hồ Anh cung ứng có sinh viên đều kiến thức bổ trợ về tất cả các nghành nghề dịch vụ kinh tế, tài chính, xuất ...


Mất bao lâu nhằm đốt mỡ