Chắc hẳn khi các bạn làm layout, chuyển PSD sang HTML. Thì việc thực hiện thuộc tính position vào CSS là không thể thiếu. Như là khi sử dụng :before tuyệt :after hoặc có tác dụng menu đa cấp hoặc header cố định và thắt chặt một khu vực khi scroll trình duyệt…..Hay là di chuyển một mục nào đó mà không gây tác động tới các phần khác. Góp bạn năng động trong vấn đề làm layout nhưng mà không phải lo lắng gì cả. Mang đến nên từ bây giờ chúng ta đã cùng tìm hiểu về thuộc tính position trong CSS nhé.

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

Giá trị của nằm trong tính position trong css

Thuộc tính position bây giờ có phần đông giá trị thường được sử dụng sau:

relative: quý hiếm này thường được áp dụng để tùy chỉnh vị trí của phần tử mà ko gây tác động tới bài toán hiển thị lúc đầu cũng như các phần tử khácabsolute: quý giá này cần sử dụng để thiết lập cấu hình vị trí của một trong những phần tử theo phần tử cha có mức giá trị ở trong tính position là relative hoặc absolutefixed: giá trị này góp cho bộ phận luôn cố định một khu vực khi họ scroll trình duyệtstatic: Đây là cực hiếm hiển thị khoác định của ở trong tính position vào CSS.

Và kèm theo với nằm trong tính position thì kia là các thuộc tính sử dụng để căn chỉnh vị trí cho chỗ tử

top: thuộc tính này giúp chúng ta căn chỉnh bộ phận từ trên xuống bên dưới nếu giá trị > 0 và trái lại nếu quý giá bottom: nằm trong tính này thì ngược lại so cùng với top, nó giúp chúng ta căn chỉnh thành phần từ dưới lên trên nếu quý giá > 0 và trái lại nếu quý giá right: trực thuộc tính này giúp họ căn chỉnh phần tử từ cần qua trái nếu quý giá > 0 và trái lại nếu cực hiếm left: ở trong tính nàygiúp chúng ta căn chỉnh bộ phận từ trái qua bắt buộc nếu cực hiếm > 0 và trái lại nếu cực hiếm

Đọc kết thúc thấy có vẻ khó hiểu nhỉ. Chắc chắn là là vậy rồi. Đọc ko mà. Chính vì thế mình tất cả làm lấy ví dụ từng thuộc tính một cho các bạn xem đây.

Giải thích những vị trí vào position

Trước khi đi sâu lý giải các cực hiếm trong position. Mình xin lý giải trước các thuộc tính về vị trí như top, right, bottom, left thì mình tất cả làm hình minh họa như tiếp sau đây cho các bạn dễ hình dung nè

*

Khi 1 phần tử thân phụ có ở trong tính position: relative và bạn có nhu cầu canh thành phần con theo thành phần cha đó và thành phần con áp dụng position: absolute. Họ sẽ sử dụng những thuộc tính vị trí trên để căn chỉnh cho nó. Phải mình bao gồm sơ lược vài ba ý dưới đây cho những bạn

Nếu chỉ có giá trị vị trí cao nhất = 0 cùng left = 0 thì phần thì phần tử sẽ nằm góc bên trái trên cùngNếu chỉ có top = 0 cùng right = 0 thì phần tử sẽ ở góc bên đề nghị trên cùngNếu chỉ gồm bottom = 0 và left = 0 thì thành phần sẽ nằm góc bên trái dưới cùngVà nếu như chỉ gồm bottom = 0 và right = 0 thì thành phần sẽ nằm tại vị trí góc bên cần dưới cùngCác trường hợp quý giá > 0 tuyệt Trường hợp đều phải sở hữu 4 quý giá top right bottom left và hầu hết = 0 phần tử con(absolute) sẽ phủ hết phần tử cha(relative) nếu các bạn không set ở trong tính width, height cho bộ phận conNếu chỉ có left = 0 với right = 0 thì phần tử con tất cả độ rộng là 100% của thành phần cha còn nếu như không set ở trong tính width cho thành phần conTương tự nếu chỉ có top = 0 với bottom = 0 thì thành phần con có độ cao 100% của bộ phận cha nếu như không set thuộc tính height cho thành phần conNgoài ra những thuộc tính không giống vẫn thực hiện chung cùng với position mọi được như margin, background…..


Giá trị relative

Như đã nhắc tới ở bên trên giá trị này giúp căn chỉnh thành phần mà không gây ảnh hưởng đến các phần tử khác. Bình thường chúng ta cần sử dụng margin giỏi padding chắc chắn sẽ đẩy các phần tử khác ra một quãng gây ảnh hưởng tới layout.


Các chúng ta thấy chứ mình dùng position: relative cho phần tử image cố kỉnh là nó nằm lên trên đoạn text luôn mà đoạn text không còn di chuyển. Nếu thông thường bạn không dùng position: relative mà bạn dùng margin tốt padding sẽ ảnh hưởng ngay.

Giá trị absolute

Đây giá trị này bản thân mới giải thích kỹ cho các bạn về những vị trí ở trên mục giải thích các vị trí. Hay thường quý hiếm absolute này lúc được áp dụng cho bộ phận mà phần tử cha của nó đang có relative hoặc absolute . Để bây giờ nó vẫn chạy theo thành phần cha đó


Các các bạn nhớ cần sử dụng Codepen này của mình thay đổi giá trị test nhé. Hiện tại mình nhằm top: 0 với left: 0nên nó nằm trong cùng phía bên trái đó. Có gì không hiểu biết nhiều kéo lên mục giải thích những vị trí sinh hoạt trên nha.

Giá trị fixed

Đây là cực hiếm thần thánh mà chúng ta hay gặp. Khi vào một website nào đó chúng ta scroll trình coi sóc mà cứ thấy chiếc menu nó cứ đứng ở kia hoài xuất xắc là loại button chẳng hạn. Đó là quý giá fixed. Giá trị này không dựa vào vào thành phần cha xuất xắc gì cả. Lúc nào scroll trình chăm bẵm là nó vận động thôi. Xem ví dụ nhằm hiểu nè.


Ngoài lề giá trị sticky

Mình không tồn tại đề cập nó sống trên bởi vì nó ko được hỗ trợ nhiều. Tuy thế cũng nói sơ cho chúng ta hiểu cùng hình dung. Nó cũng tương đương fixed nhưng lại mà khi chúng ta scroll va đó nó đã nằm như fixed và khi các bạn scroll lên thoát khỏi nó nó sẽ quay trở lại vị trí ban đầu.

*

Xem kiểm tra phát cho dễ nắm bắt nè. Vì nó không cung ứng nhiều buộc phải mình khuyến khích các bạn không phải dùng nà.


Lời kết

Thuộc tính position vào CSS rất đặc biệt quan trọng nên mình khuyên chúng ta nên học và nắm rõ chúng thật cẩn thận càng. Nó được sử dụng tương đối nhiều trong vấn đề code website bây giờ lắm nhất là cắt layout với làm những thành phần như menu nhiều cấp(sử dụng nhiều position lắm).

Nếu có thời hạn mình sẽ viết thêm bài áp dụng thuộc tính position này vào trong một yếu tắc nào đó trong trang web cho chúng ta dễ tưởng tượng nha. Còn giờ đồng hồ thì cám ơn chúng ta đã đọc bài xích và chúc các bạn một ngày tốt lành.

Xem thêm: Báo Cáo Lưu Chuyển Tiền Tệ ( Cash Flow Statement Là Gì ? 【Báo Cáo Lưu Hành Tiền Tệ】

Ngoài ra Blog của bản thân viết rất nhiều kiến thức có lợi về HTML CSS như CSS Flexbox toàn tập, CSS Grid toàn tập, cách cắt PSD sang trọng HTML toàn tập rất chi tiết và đẩy đủ. Các chúng ta cũng có thể Nhấn vào đây để theo dõi và quan sát nha. Xin cám ơn chúng ta đã gọi bài.