Tìm Hiểu Về Thuộc Tính Position Absolute Là Gì

Định địa điểm các phần tử

Bằng CSS, chúng ta cũng có thể xác định trí những bộ phận nghỉ ngơi bất kể chỗ nào mong muốn trên trang. Với hầu hết gì vẫn học tập được ngơi nghỉ bài 13, nó vẫn xuất hiện cho chính mình các cơ hội nhằm nâng cấp kĩ năng dàn trang đúng chuẩn cùng cụ thể may mắn.

Bạn đang xem: Tìm Hiểu Về Thuộc Tính Position Absolute Là Gì

Trong bài xích này, chúng ta vẫn học tập các phần:

Các thức xác định trong CSS

quý khách hãy tưởng tượng một cửa sổ trình coi ngó sẽ là 1 trong khối hệ thống tọa độ như bên dưới:

*

CSS hoàn toàn có thể định vị các bộ phận (mô hình hộp) sống bất cứ chỗ nào bên trên trang

Giả sử bạn có nhu cầu sắp xếp vị trí cho 1 tiêu đề . Nó sẽ tiến hành coi nhỏng một loại hộp nhỏng mặt dưới:

*

Bây giờ bạn muốn nó tất cả địa điểm giải pháp 100px từ bỏ lề bên trên của trang và 200px từ bỏ lề trái của trang, bạn có thể viết đoạn CSS nhỏng sau:

h1 position: absolute; top: 100px; left: 200px;Kết trái sẽ tiến hành nhỏng sau:

*

Nlỗi chúng ta vẫn thấy định vị bởi CSS cực kỳ chính xác với dễ dãi rộng biện pháp cũ thực hiện bằng table trước đây.

Vị trí hoàn hảo và tuyệt vời nhất – Absolute

Một thành phần được định vị trí hoàn hảo nhất – absolute Tức là nó sẽ không chiếm phần bất kể không gian như thế nào của trang. Quý Khách hãy tưởng tượng các thành phần có mức giá trị absolute đã là một trong lớp nằm trên bề mặt tọa độ, đề nghị khoảng trống bên dưới nó không trở nên chiếm phần.

Thuộc tính position sẽ được gán giá trị là absolute ví như bạn muốn bộ phận đó gồm vị trí tuyệt đối. Quý Khách sử dụng những ở trong tính trái – left, cần – right,trên – top, và đáy – bottom nhằm xác định vị trí đúng mực của mô hình vỏ hộp đối với các lề của trang.

Xem thêm: Vì Sao Không Nên Học Ngành Hàn Quốc Học Ngành Hàn Quốc Học? Tại Sao Nên Học Tiếng Hàn Quốc

Vi dụ tiếp sau đây đến ta 4 quy mô vỏ hộp nằm tại vị trí 4 góc của trang:

HTML


Box 1
Box 2
Box 3
CSS

#box1 position: absolute; top: 50px; left: 50px;#box2 position: absolute; top: 50px; right: 50px;#box3 position: absolute; bottom: 50px; right: 50px;#box4 position: absolute; bottom: 50px; left: 50px;Xem ví dụ

Vị trí tương đối – Relative

Để định vị trí tương đối, thuộc tính position sẽ tiến hành tùy chỉnh là relative. Sự khác nhau giữa vị trí tuyệt vời – absolute cùng kha khá – relative nằm tại vị trí chổ phương pháp tính địa chỉ của từng quý giá.

Vị trí kha khá của 1 phần tử được tính từ địa điểm ngulặng cội hiện tại của nó bên trên trang. Như vậy Có nghĩa là bạn sẽ định vị thành phần quý phái trái, buộc phải, lên hoặc xuống dựa trên vị trí hiện tại của nó trên trang, với nó đã chiếm phần một khoảng không cần thiết.

Bạn hãy đọc ví dụ dưới với giải pháp cơ mà những bộ phận vướng lại khoảng tầm trống Lúc được xác định tương đối:

#box1 position: relative; left: 150px; bottom: 10px;#box2 position: relative; left: 50px; bottom: 5px;#box3 position: relative; left: 450px; bottom: 30px;Xem ví dụ

Tổng kết

Với tất cả đa số gì vẫn học tập những bài xích về float position, absolute possition, relative position, bây chừ chúng ta cũng có thể dàn trang, xây đắp web của người tiêu dùng theo đúng ý đồ một cách đúng đắn, chi tiết cùng dễ dàng sửa thay đổi sau này. Trong bài bác tiếp nối, chúng ta vẫn học về các lớp – layer, một mẹo nhỏ sẽ giúp câu hỏi dàn trang lên một tầm cao new.

Leave a Reply

Your email address will not be published. Required fields are marked *

x

Welcome Back!

Login to your account below

Retrieve your password

Please enter your username or email address to reset your password.