Định vị các phần tử. Định vị tuyệt đối trong CSS. Các phần tử được định vị tuyệt đối bỏ qua thuộc tính float
Chúng hoạt động với tất cả các phần tử được định vị ngoại trừ các phần tử tĩnh.
Ví dụ về định vị
Các yếu tố có thể chồng lên nhau!
Hiển thị một phần tử phía trên phần còn lại!
Thuộc tính vị trí có 4 giá trị: tĩnh, cố định, tương đối và tuyệt đối. Mỗi ý nghĩa này sẽ được trình bày dưới đây với một ví dụ về cách sử dụng.
Trước khi xem xét chi tiết tất cả các loại vị trí của các thành phần trên một trang, chúng ta sẽ phải xem xét luồng tài liệu là gì.
Luồng tài liệu
Theo mặc định, các phần tử trên trang web được hiển thị theo thứ tự xuất hiện trong tài liệu HTML, nghĩa là các phần tử khối chiếm toàn bộ chiều rộng có sẵn cho chúng và được xếp chồng lên nhau theo chiều dọc, cái này bên dưới cái kia. Các phần tử nội tuyến được xếp theo chiều ngang cho đến khi chiếm toàn bộ chiều rộng có sẵn, sau khi chiếm toàn bộ chiều rộng, ngắt dòng được thực hiện và mọi thứ bắt đầu lại. Sự sắp xếp các phần tử này được gọi là dòng chảy bình thường(còn được gọi là luồng tài liệu hoặc dòng chảy chung).
Bạn có thể sử dụng thuộc tính float hoặc location để xóa một phần tử khỏi luồng thông thường. Nếu một phần tử "rơi ra" khỏi luồng thông thường thì các phần tử nằm trong mã bên dưới phần tử đó sẽ được chuyển vào vị trí của nó trên trang web.
Định vị tĩnh
Tĩnh là vị trí mặc định cho tất cả các thành phần trên trang web. Nếu không áp dụng cho phần tử thuộc tính vị trí, khi đó nó sẽ ở dạng tĩnh và được hiển thị trên trang web theo luồng phần tử chung.
Tại sử dụng CSS thuộc tính top , left , right hoặc Bottom thành phần tử được định vị tĩnh, chúng sẽ bị bỏ qua.
Nếu cần, bạn có thể đặt vị trí tĩnh trong biểu định kiểu bằng giá trị tĩnh:
Đoạn đầu tiên.
Đoạn thứ hai.
Thử "Định vị cố định
Các phần tử có vị trí cố định được đặt trên trang so với cửa sổ trình duyệt. Những phần tử như vậy sẽ bị loại bỏ khỏi luồng chung; các phần tử theo sau phần tử cố định trong luồng sẽ bỏ qua nó, di chuyển và chiếm vị trí của nó trên trang web.
Điều đáng chú ý là các phần tử có vị trí cố định có thể chồng lên các phần tử khác, ẩn chúng hoàn toàn hoặc một phần. Trong khi cuộn trang dài, chúng tạo ra hiệu ứng các vật thể bất động, giữ nguyên vị trí:
Văn bản Văn bản Văn bản Văn bản Văn bản Văn bản Một số văn bản Văn bản Văn bản Văn bản Văn bản Văn bảnThử "
Định vị tương đối
Các phần tử có vị trí tương đối, như các phần tử tĩnh, vẫn nằm trong luồng chung. Khi áp dụng các thuộc tính top , left , right hoặc Bottom cho các phần tử có vị trí tương đối, chúng sẽ di chuyển tương ứng với vị trí của chúng, rời khỏi khoảng trống nơi phần tử ban đầu được đặt.
Các phần tử như vậy không ảnh hưởng đến vị trí của các phần tử xung quanh chúng; các phần tử còn lại vẫn giữ nguyên vị trí và có thể bị chồng lên bởi một phần tử có vị trí tương đối:
Tiêu đề cấp độ đầu tiên.
Tiêu đề có vị trí tương đối.
Tiêu đề cấp ba.
Thử "Lưu ý: Các phần tử tương đối thường được dùng làm cha của các phần tử tuyệt đối.
Định vị tuyệt đối
Các phần tử được định vị tuyệt đối bị loại bỏ hoàn toàn khỏi luồng tổng thể, các phần tử còn lại sẽ chiếm không gian trống, hoàn toàn bỏ qua các phần tử được định vị tuyệt đối. Sau đó, bạn có thể định vị phần tử ở bất cứ đâu bạn muốn trên trang web bằng cách sử dụng các thuộc tính trên cùng, bên trái, bên phải hoặc dưới cùng.
Tất cả các phần tử được định vị tuyệt đối được đặt tương đối với cửa sổ trình duyệt hoặc tương đối với tổ tiên được định vị gần nhất (nếu có) có thuộc tính vị trí là tuyệt đối, cố định hoặc tương đối.
Hãy thay đổi vị trí của logo bằng cách sử dụng định vị tuyệt đối.
Lúc này logo sẽ nằm ở bên phải góc trên cùng trang.
Các phần tử chồng chéo
Khi các phần tử nằm ngoài luồng tổng thể của trang, chúng có thể chồng lên nhau. Thông thường, thứ tự của các phần tử tương ứng với thứ tự của chúng trong mã HTML của trang, tuy nhiên, có thể kiểm soát thứ tự chồng chéo bằng thuộc tính CSS z-index, giá trị của nó càng cao thì phần tử sẽ càng cao.
15.03.2017
Chưa
Chào mọi người!
Trong hướng dẫn hôm nay, tôi sẽ chỉ cho bạn cách bạn có thể sử dụng định vị khối để đặt một phần tử ở bất kỳ đâu trên màn hình.
Định vị khối mang lại cho chúng ta điều gì? Với sự trợ giúp của định vị khối, quản trị viên web sẽ có thể tạo bất kỳ thiết kế trang web độc đáo nào, đặt các khối ở nơi anh ta muốn. Để đặt các khối ở bất cứ đâu trên màn hình, chỉ cần xác định tọa độ.
Tọa độ trong CSS
Tài sản "ĐỨNG ĐẦU» | «
BÊN TRÁI» | «
PHẢI» | «
ĐÁY
»
Tọa độ phải được chỉ định cho vị trí của các khối, tức là nơi khối sẽ được đặt.
Sơ đồ hệ tọa độ:
Tọa độ được xác định bởi bốn quy tắc:
- đứng đầu- hướng lên;
- bên trái- bên trái;
- Phải- Phải;
- đáy- xuống.
Cú pháp:
Quy tắc_Coordine: value_coordine;
Nghĩa:
Chỉ định giá trị bằng px hoặc %.
Trên cùng:100px; /* cạnh trên */ left:100px; /* Cạnh bên trái */
Chỉ cần xác định tọa độ cho hai cạnh (trên hoặc dưới, trái hoặc phải) là đủ.
Định vị trong CSS
Tài sản "CHỨC VỤ
»
Định vị được viết bằng CSS thông qua quy tắc “vị trí” với giá trị mong muốn.
Cú pháp:
Vị trí: giá trị;
Nghĩa:
- tuyệt đối- tuyệt đối;
- liên quan đến- liên quan đến;
- đã sửa- đã sửa.
Chúng ta hãy đi qua từng giá trị.
Nghĩa "
TUYỆT ĐỐI"
Định vị tuyệt đối cho phép quản trị viên web đặt các khối trên trang web ở bất kỳ đâu trên màn hình. Chỉ cần viết quy tắc “vị trí” trong CSS với giá trị “tuyệt đối” và tọa độ cần thiết là đủ:
Vị trí: tuyệt đối; /*định vị tuyệt đối*/
Kết quả:
Nghĩa "LIÊN QUAN ĐẾN
»
Định vị tương đối cho phép quản trị viên web di chuyển một khối trên trang web nhưng không gian ban đầu của khối không được giải phóng cho phần tử khác. Trong CSS, viết quy tắc “vị trí” với giá trị “tương đối” và tọa độ mong muốn:
Chức vụ: tương đối; /*định vị tương đối*/
CSS là viết tắt của Cascading Style Sheets. CSS mô tả cách các phần tử HTML được hiển thị trên màn hình, giấy hoặc trên các phương tiện khác. CSS tiết kiệm rất nhiều công việc. Nó có thể kiểm soát bố cục của nhiều trang web cùng một lúc. CSS có thể được thêm vào các phần tử HTML theo 3 cách: Nội tuyến - bằng cách sử dụng thuộc tính style trong các phần tử HTML Nội bộ - bằng cách sử dụng một phần tử trong phần Bên ngoài - bằng cách sử dụng tệp CSS bên ngoài Cách phổ biến nhất để thêm CSS là giữ nguyên phần CSS style trong các tệp CSS riêng biệt. Tuy nhiên, ở đây chúng ta sẽ sử dụng kiểu dáng nội tuyến và kiểu dáng bên trong vì cách này dễ minh họa hơn và bạn cũng dễ dàng tự mình thử hơn.
Kết quả:
Mặc định
Định vị tương đối
Đã sửa lỗi định vị trong CSS
"Giá trị cố định
Định vị cố định cho phép quản trị viên web đặt các khối trên một trang web ở bất kỳ đâu trên màn hình và khi cuộn trang web, khối đó sẽ luôn nằm ở vị trí tương ứng với cửa sổ trình duyệt (sẽ luôn hiển thị trên màn hình). Chỉ cần viết quy tắc “vị trí” trong CSS với giá trị “cố định” và tọa độ cần thiết là đủ:
Vị trí: cố định; /*định vị cố định*/
CSS là viết tắt của Cascading Style Sheets. CSS mô tả cách các phần tử HTML được hiển thị trên màn hình, giấy hoặc trên các phương tiện khác. CSS tiết kiệm rất nhiều công việc. Nó có thể kiểm soát bố cục của nhiều trang web cùng một lúc. CSS có thể được thêm vào các phần tử HTML theo 3 cách: Nội tuyến - bằng cách sử dụng thuộc tính style trong các phần tử HTML Nội bộ - bằng cách sử dụng một phần tử trong phần Bên ngoài - bằng cách sử dụng tệp CSS bên ngoài Cách phổ biến nhất để thêm CSS là giữ nguyên phần CSS style trong các tệp CSS riêng biệt. Tuy nhiên, ở đây chúng ta sẽ sử dụng kiểu dáng nội tuyến và kiểu dáng bên trong vì cách này dễ minh họa hơn và bạn cũng dễ dàng tự mình thử hơn.
Nếu kết quả không hiển thị hoặc không rõ ràng, hãy thêm đủ văn bản để tạo thanh cuộn trên màn hình trang web.
Bài học thế là xong! Vẫn còn 2-3 bài nữa là bạn sẽ thành thạo Khái niệm cơ bản về CSS. Điều này có nghĩa là bạn có thể tạo các trang web đẹp một cách dễ dàng.
Đừng bỏ lỡ các bài học còn lại! Đăng ký để cập nhật!
Bài trước
Mục tiếp theo
Khi làm việc với văn bản, người dùng có thể cần hoán đổi câu hoặc toàn bộ đoạn văn hoặc sắp xếp các đoạn văn bản theo một cách không chuẩn mực nào đó. Di chuyển một khối văn bản trong một ứng dụng Microsoft Office Word có thể được thực hiện theo nhiều cách.
Hướng dẫn
Ctrl, Shift và mũi tên phải/trái làm nổi bật một từ và nếu bạn sử dụng mũi tên lên hoặc xuống, bạn có thể đánh dấu toàn bộ đoạn văn.
Phần tử khối trong HTML là phần tử theo mặc định chiếm toàn bộ chiều rộng của phần tử gốc của nó. Phần tử cha có thể là phần tử khối khác hoặc cửa sổ trình duyệt. Bạn có thể đặt chiều rộng và chiều cao của phần tử khối bằng thuộc tính CSS. Định vị khối phần tửđược gọi là quá trình đặt chúng bên trong cửa sổ trình duyệt và liên quan với nhau bằng sử dụng CSS thuộc tính vị trí trái, trên, phải, dưới. Tài sản Vị trí CSS nhằm mục đích đặt một trong bốn loại định vị có sẵn: tĩnh (mặc định), tuyệt đối, cố định và tương đối. Nghỉ ngơi Thuộc tính CSS, cụ thể là left , top , right và Bottom nhằm mục đích chỉ định khoảng cách tương ứng với các cạnh trái, trên, phải và dưới của phần tử cha. Ngoài ra, các thành phần khối có thể chồng lên nhau khi thiết lập các thuộc tính nhất định và Cơ hội nàyđiều tương tự có thể được sử dụng trên các trang web.
Định vị mặc định (tĩnh)
Nếu bạn không chỉ định vị trí cho một phần tử khối hoặc chỉ định static , điều này giống nhau thì các phần tử khối sẽ được sắp xếp theo thứ tự. Hơn nữa, khối tiếp theo (ví dụ: màu đỏ) nằm ở dòng mới. Ngoài ra, vị trí này không bị ảnh hưởng bởi việc đặt khoảng cách left , top , right và Bottom .
Định vị tuyệt đối (absolute)
Với định vị tuyệt đối, vị trí của một phần tử được chỉ định tương ứng với các cạnh của cửa sổ trình duyệt bằng cách sử dụng khoảng cách được chỉ định bởi các thuộc tính left , top , right và Bottom . Nếu bạn chỉ định khoảng cách trái và phải cùng một lúc và chúng xung đột với nhau thì ưu tiên sẽ được dành cho left , điều tương tự cũng xảy ra với top và Bottom , trong đó khoảng cách top được ưu tiên. Định vị tuyệt đối thường được sử dụng kết hợp với định vị tương đối cho mục đích thiết kế, khi cần đặt các phần tử khác nhau tương đối với nhau; nó cũng có thể được sử dụng để tạo menu thả xuống, bố cục trang web, v.v.
Định vị cố định
Định vị cố định khác với các loại định vị khác và không di chuyển cùng với nội dung khi bạn cuộn trang. Các phần tử khối có vị trí cố định được neo bằng cách sử dụng các thuộc tính left , top , right và Bottom vào các cạnh của cửa sổ trình duyệt. Định vị cố định được sử dụng để tạo giao diện khung (cửa sổ trình duyệt được chia thành nhiều khu vực), menu cố định, tầng hầm cố định trang web và các khối “vĩnh viễn” (danh sách các liên kết, nút xã hội vân vân.).
Định vị tương đối
Vị trí tương đối được chỉ định bằng cách chỉ định khoảng cách left , top , right và Bottom so với vị trí hiện tại của nó.
Tuy nhiên, vị trí khối này cũng có thể được tạo bằng cách sử dụng thuộc tính lề(thụt lề).
Định vị tương đối không thú vị khi sử dụng riêng nó, nó chủ yếu được sử dụng cùng với định vị tuyệt đối.
Hãy xem xét các lựa chọn:
Hai công cụ chính thường được sử dụng để bố trí trang - định vị Và chuyển động tự do (nổi). Định vị CSS cho phép bạn chỉ định vị trí hộp của phần tử xuất hiện và phần nổi tự do sẽ di chuyển các phần tử sang cạnh trái hoặc phải của hộp chứa, cho phép phần còn lại của nội dung "chảy" xung quanh nó.
Định vị và chuyển động tự do của các phần tử
1. Các kiểu định vị
Thuộc tính vị trí cho phép bạn chỉ định chính xác vị trí mới của khối so với vị trí của nó trong luồng tài liệu thông thường. Theo mặc định, tất cả các phần tử được sắp xếp tuần tự lần lượt theo thứ tự chúng được xác định trong cấu trúc của tài liệu HTML. Tài sản không được thừa kế.
| chức vụ | |
|---|---|
| Nghĩa: | |
| tĩnh | Giá trị mặc định có nghĩa là không có vị trí. Các phần tử được hiển thị tuần tự lần lượt theo thứ tự chúng được xác định trong tài liệu HTML. Được sử dụng để xóa bất kỳ giá trị định vị nào khác. |
| liên quan đến | Một phần tử có vị trí tương đối được di chuyển khỏi vị trí bình thường của nó theo các hướng khác nhau so với ranh giới vùng chứa gốc và không gian mà nó chiếm giữ không biến mất. Tuy nhiên, thành phần như vậy có thể chồng lên nội dung khác trên trang. Nếu đối với một phần tử được định vị tương đối, bạn đặt các thuộc tính trên và dưới hoặc trái và phải cùng một lúc, thì trong trường hợp đầu tiên, chỉ trên cùng mới hoạt động, trong trường hợp thứ hai - bên trái. Định vị tương đối cho phép bạn đặt chỉ mục z cho một phần tử, cũng như định vị tuyệt đối phần tử con bên trong khối. |
| tuyệt đối | Một phần tử được định vị tuyệt đối sẽ bị xóa hoàn toàn khỏi luồng tài liệu và được định vị so với ranh giới của khối vùng chứa của nó (phần tử khác hoặc cửa sổ trình duyệt). Khối chứa cho phần tử được định vị tuyệt đối là phần tử tổ tiên gần nhất có giá trị thuộc tính vị trí không phải là tĩnh. Vị trí các cạnh của phần tử được xác định bằng cách sử dụng thuộc tính offset. Không gian mà phần tử đó chiếm giữ sẽ sụp đổ như thể phần tử đó không tồn tại trên trang. Một phần tử được định vị tuyệt đối có thể chồng lên nhau hoặc bị thay thế bởi các phần tử khác (do thuộc tính chỉ mục z). Bất kỳ phần tử nào được định vị tuyệt đối đều tạo ra một khối, nghĩa là nó nhận giá trị display: block; . |
| đã sửa | Sửa một phần tử tại một vị trí được chỉ định trên trang. Khối chứa của một phần tử cố định là khung nhìn, tức là phần tử luôn được cố định so với cửa sổ trình duyệt và không thay đổi vị trí của nó trong khi cuộn trang. Bản thân phần tử này đã bị xóa hoàn toàn khỏi luồng tài liệu chính và được tạo trong luồng tài liệu mới. |
| ban đầu | Đặt giá trị thuộc tính thành giá trị mặc định. |
| thừa kế | Kế thừa giá trị thuộc tính từ phần tử cha. |
Cơm. 1. Sự khác biệt giữa định vị tĩnh, tương đối và tuyệt đối 2. Thuộc tính offset
Các thuộc tính mô tả phần bù so với cạnh gần nhất của khối container. Đặt cho các phần tử có giá trị thuộc tính vị trí không phải là tĩnh. Họ có thể nhận cả giá trị tích cực và tiêu cực. Không được thừa kế.
Đối với thuộc tính top, các giá trị dương di chuyển cạnh trên của phần tử được định vị bên dưới và các giá trị âm di chuyển cạnh trên của khối chứa nó. Đối với thuộc tính left, các giá trị dương sẽ di chuyển cạnh của phần tử được định vị sang bên phải và các giá trị âm sẽ di chuyển cạnh của phần tử được định vị sang trái. Nghĩa là, các giá trị dương di chuyển phần tử bên trong khối vùng chứa và các giá trị âm di chuyển phần tử ra bên ngoài khối chứa.
3. Định vị trong một phần tử
Đối với khối chứa của một phần tử được định vị tuyệt đối, thuộc tính vị trí: tương đối được đặt mà không có phần bù. Điều này cho phép các phần tử được định vị trong phần tử vùng chứa.
Cơm. 2. Định vị tương đối tuyệt đối4. Vấn đề về định vị
1. Nếu chiều rộng hoặc chiều cao của một phần tử được định vị tuyệt đối được đặt thành auto thì giá trị của nó sẽ được xác định bởi chiều rộng hoặc chiều cao của nội dung phần tử. Nếu chiều rộng hoặc chiều cao được khai báo rõ ràng thì đây là giá trị sẽ được gán.
2. Nếu bên trong một khối có vị trí: tuyệt đối có các phần tử được đặt float, thì chiều cao của phần tử này sẽ bằng chiều cao của phần tử cao nhất trong số các phần tử này.
3. Một phần tử có vị trí: tuyệt đối hoặc vị trí: cố định không thể được đặt cùng một lúc tài sản nổi, nhưng đối với một phần tử có vị trí: tương đối - điều đó là có thể.
4. Nếu tổ tiên của phần tử được định vị là một phần tử khối, thì vùng chứa khối được hình thành bởi vùng nội dung được phân cách bằng đường viền. Nếu tổ tiên là một phần tử nội tuyến, khối chứa được hình thành bởi ranh giới bên ngoài của nội dung của nó. Nếu không có tổ tiên thì khối container là phần tử body.
5. Chuyển động tự do của các yếu tố
Theo thứ tự thông thường, các phần tử khối được hiển thị bắt đầu từ cạnh trên của cửa sổ trình duyệt và hướng về phía dưới cùng. Thuộc tính float cho phép bạn di chuyển bất kỳ phần tử nào, căn chỉnh nó sang cạnh trái hoặc phải của trang web hoặc phần tử chứa nó. Trong trường hợp này, các phần tử khối khác sẽ bỏ qua nó và phần tử nội tuyến sẽ dịch chuyển sang phải hoặc trái, giải phóng không gian cho nó và chảy xung quanh nó.
Cơm. 3. Chuyển động tự do của các yếu tố Khối nổi đảm nhận kích thước nội dung của nó, có tính đến phần đệm và đường viền. Lề trên và dưới của phần tử nổi không bị thu gọn. Thuộc tính float áp dụng cho cả phần tử khối và phần tử nội tuyến.
Cạnh ngoài bên trái hoặc bên phải của phần tử được di chuyển, không giống như các phần tử được định vị, không thể được đặt ở bên trái (hoặc bên phải) của cạnh trong của khối chứa nó, tức là. vượt ra ngoài ranh giới của nó. Hơn nữa, nếu khối container được đặt thành phần đệm, khi đó khối nổi sẽ được đặt cách nhau từ cạnh của khối container ở một khoảng cách xác định.
Thuộc tính tự động thay đổi giá trị được tính toán (hiển thị trong trình duyệt) thuộc tính hiển thịđể hiển thị: chặn các giá trị sau: inline , inline-block , table-row , table-row-group , table-column , table-column-group , table-cell , table-caption , table-header-group , table - nhóm chân trang . Giá trị của bảng nội tuyến thay đổi thành bảng .
Thuộc tính không có tác dụng đối với các phần tử có display: flex và display: inline-flex .
Khi sử dụng thuộc tính float trên các phần tử khối, hãy đảm bảo chỉ định chiều rộng. Điều này sẽ tạo không gian cho các nội dung khác trong trình duyệt. Nhưng nếu chiều rộng tổng hợp của tất cả các cột lớn hơn không gian có sẵn thì phần tử cuối cùng sẽ giảm xuống.
Đồng thời, các lề dọc yếu tố sắp xếp hợp lý không bị thu gọn với phần đệm của các phần tử liền kề, không giống như các phần tử khối thông thường.
6. Hủy bỏ dòng xung quanh các phần tử
6.1. tài sản rõ ràng
Thuộc tính clear xác định cách phần tử theo sau phần tử float sẽ được định vị. Thuộc tính hủy phần float trên một hoặc cả hai phía của phần tử được đặt bởi thuộc tính float. Để ngăn nền hoặc đường viền hiển thị dưới các phần tử nổi, hãy sử dụng quy tắc (tràn: ẩn;).
6.2. Làm sạch luồng có kiểu bằng cách sử dụng lớp Clearfix và lớp giả :after
Giả sử bạn có một thùng chứa khối không được chỉ định chiều rộng và chiều cao. Một khối nổi có kích thước xác định được đặt bên trong nó.
Cơm. 4. “Hiệu ứng thu gọn” của khối containerGiải pháp cho vấn đề:
Chúng tôi tạo lớp .clearfix và kết hợp với lớp giả :after, áp dụng nó cho khối chứa.
Tùy chọn thứ hai để xóa luồng:
Clearfix:after ( nội dung: ""; hiển thị: bảng; xóa: cả hai; ) 
Cơm. 5. Áp dụng phương pháp “làm sạch” khối container chứa phần tử nổi
6.3. Một cách dễ dàng để làm sạch một luồng
Có một thủ thuật khác để làm sạch luồng cho một phần tử chứa các phần tử nổi, chẳng hạn như danh sách có dấu đầu dòng theo chiều ngang:
Ul ( lề: 0; kiểu danh sách: không có; đệm: 20px; nền: #e7e6d4; tràn: tự động; ) li ( float: left; width: calc(100% / 3 - 20px); chiều cao: 50px; lề- phải: 20px; nền: #ffffff; đường viền: 3px nét đứt #666666; ) li:con cuối cùng (lề phải: 0;) Hình. 6. Dọn dẹp luồng danh sách ngang
