Vị trí phần tử CSS. Yếu tố định vị

Nếu bạn cắt vào bất kỳ trang web nào được tạo trên cơ sở html, thì bạn sẽ thấy một cấu trúc phân lớp nhất định. Hơn nữa, hình dáng của nó sẽ giống như một chiếc bánh nhiều lớp. Nếu bạn nghĩ như vậy thì rất có thể bạn đã lâu rồi chưa ăn gì. Vì vậy, trước tiên hãy thỏa mãn cơn đói của bạn và sau đó chúng tôi sẽ cho bạn biết cách căn giữa lớp div trên trang web của bạn:

Ưu điểm của bố cục sử dụng thẻ

Có hai loại cấu trúc trang web chính:

dạng bảng;
Khối.

Bố cục dạng bảng chiếm ưu thế ngay cả vào buổi bình minh của Internet. Ưu điểm của nó bao gồm độ chính xác của vị trí được chỉ định. Nhưng tuy nhiên, nó có những thiếu sót rõ ràng. Những vấn đề chính là độ dài của mã và tốc độ tải thấp.

Khi sử dụng bố cục dạng bảng, trang web sẽ không được hiển thị cho đến khi được tải hoàn toàn. Trong khi khi sử dụng khối div thì các phần tử được hiển thị ngay lập tức.

Ngoài tốc độ tải cao, việc xây dựng khối trang web cho phép bạn giảm số lượng mã html nhiều lần. Bao gồm thông qua việc sử dụng các lớp CSS.

Tuy nhiên, nên sử dụng bố cục dạng bảng để cấu trúc hiển thị dữ liệu trên trang. Một ví dụ điển hình về việc sử dụng nó là hiển thị các bảng.

Việc xây dựng khối dựa trên thẻ còn được gọi là từng lớp và bản thân các khối được gọi là lớp. Điều này là do khi sử dụng một số giá trị thuộc tính nhất định, chúng có thể được xếp chồng lên nhau, tương tự như các lớp trong Photoshop.

Hỗ trợ định vị

Trong bố cục khối, tốt hơn là định vị các lớp bằng cách sử dụng các biểu định kiểu xếp tầng. Thuộc tính CSS chính chịu trách nhiệm bố cục là float.
Cú pháp thuộc tính:
phao: trái | đúng | không | thừa kế
Ở đâu:

left – căn chỉnh phần tử ở cạnh trái của màn hình. Dòng chảy xung quanh các phần tử còn lại xảy ra ở bên phải;
right – căn chỉnh ở bên phải, bao quanh các phần tử khác – ở bên trái;
không – không được phép gói;
kế thừa - kế thừa giá trị của phần tử cha.

Hãy xem một ví dụ đơn giản về định vị div bằng thuộc tính này:

#left ( chiều rộng: 200px; chiều cao: 100px; float: trái; nền: rgb(255,51,102); ) #right ( chiều rộng: 200px; chiều cao: 100px; float: phải; nền: rgb(0,255,153); ) Khối bên trái Khối bên phải

Bây giờ chúng ta sẽ cố gắng sử dụng thuộc tính tương tự để định vị div thứ ba ở giữa trang. Nhưng tiếc là float không có giá trị trung tâm. Và khi bạn cung cấp cho một khối mới một giá trị căn chỉnh sang phải hoặc trái, nó sẽ được dịch chuyển theo hướng đã chỉ định. Do đó, tất cả những gì còn lại là đặt float: left cho cả ba khối:

Nhưng đây cũng không phải là lựa chọn tốt nhất. Khi cửa sổ được thu nhỏ lại, tất cả các lớp được xếp thành một hàng theo chiều dọc và khi tăng kích thước, chúng sẽ dính vào cạnh trái của cửa sổ. Vì vậy, chúng ta cần một cách tốt hơn để căn giữa div.

Lớp định tâm

Trong ví dụ tiếp theo, chúng tôi sẽ sử dụng lớp chứa trong đó chúng tôi sẽ đặt các phần tử còn lại. Điều này giải quyết vấn đề các khối di chuyển tương đối với nhau khi kích thước cửa sổ thay đổi. Việc căn giữa vùng chứa ở giữa được thực hiện bằng cách đặt thuộc tính lề về 0 cho lề từ cạnh trên và auto ở hai bên (margin: 0 auto ):

#container ( chiều rộng: 600px; lề: 0 tự động; ) #left ( chiều rộng: 200px; chiều cao: 100px; float: trái; nền: rgb(255,51,102); ) #right ( chiều rộng: 200px; chiều cao: 100px; float : left; nền: rgb(0,255,153); #center ( chiều rộng: 200px; chiều cao: 100px; float: left; nền: rgb(255,0,0); ) Khối bên trái Khối trung tâm Khối bên phải

Ví dụ tương tự cho thấy cách bạn có thể căn giữa div theo chiều ngang. Và nếu bạn chỉnh sửa một chút đoạn mã trên, bạn có thể đạt được sự căn chỉnh theo chiều dọc của các khối. Để làm điều này, bạn chỉ cần thay đổi độ dài của lớp chứa (giảm nó). Nghĩa là, sau khi chỉnh sửa lớp css của nó sẽ trông như thế này:

Sau khi thay đổi, tất cả các khối sẽ xếp thẳng hàng ở giữa. Và vị trí của chúng sẽ không thay đổi bất kể kích thước cửa sổ trình duyệt. Đây là cách căn giữa theo chiều dọc của div:

Trong ví dụ sau, chúng tôi đã sử dụng một số thuộc tính css mới để căn giữa các lớp bên trong một vùng chứa:

#container ( chiều rộng: 450px; chiều cao: 150px; lề: 0 tự động; màu nền: #66CCFF; ) #left ( chiều rộng: 100px; chiều cao: 100px; nền: rgb(255,51,102); hiển thị: khối nội tuyến; căn dọc: giữa; lề trái: 35px; ) #right ( chiều rộng: 100px; chiều cao: 100px; nền: rgb(0,255,153); hiển thị: khối nội tuyến; căn chỉnh dọc: giữa; lề trái: 35px; ) #center ( chiều rộng: 100px; chiều cao: 100px; nền: rgb(255,0,0); hiển thị: khối nội tuyến; căn chỉnh dọc: giữa; lề trái: 35px; )

Một mô tả ngắn về các thuộc tính css và giá trị của chúng mà chúng tôi đã sử dụng trong ví dụ này để căn giữa một div trong div:

display: inline-block – căn chỉnh một phần tử khối thành một dòng và đảm bảo nó bao quanh một phần tử khác;
Vertical-align: middle – căn chỉnh phần tử ở giữa so với phần tử gốc;
lề trái – đặt lề trái.

Cách tạo liên kết từ một lớp

Nghe có vẻ kỳ lạ nhưng điều này là có thể. Đôi khi khối div làm liên kết có thể cần thiết khi bố trí nhiều loại menu khác nhau. Hãy xem một ví dụ thực tế về việc triển khai lớp liên kết:

#layer1( chiều rộng: 500px; chiều cao: 100px; nền: rgb(51,255,204); đường viền:groove; ) a ( display: block; căn chỉnh văn bản: giữa; chiều cao: 100%; màu: rgb(255,0,51) ; ) Liên kết tới trang web của chúng tôi

Trong ví dụ này, bằng cách sử dụng dòng display: block, chúng ta đặt liên kết thành giá trị của phần tử khối. Và để toàn bộ chiều cao của khối div trở thành một liên kết, hãy đặt chiều cao: 100%.

Ẩn và hiển thị các phần tử khối

Các phần tử khối mang lại nhiều cơ hội hơn để mở rộng chức năng của giao diện so với bố cục dạng bảng đã lỗi thời. Điều thường xảy ra là thiết kế trang web là duy nhất và dễ nhận biết. Nhưng đối với sự độc quyền như vậy, bạn phải trả giá bằng việc thiếu không gian trống.

Điều này đặc biệt đúng đối với trang chính, trang có chi phí quảng cáo cao nhất. Vì vậy, vấn đề nảy sinh là phải “đẩy” một banner quảng cáo khác vào đâu. Và ở đây bạn không thể tránh khỏi việc căn chỉnh div vào giữa trang!

Một giải pháp hợp lý hơn là ẩn đi một số khối. Đây là một ví dụ đơn giản về việc thực hiện như vậy:

#layer1( display:block; chiều rộng: 500px; chiều cao: 100px; nền: rgb(51,255,204); border:groove; ) hàm show() ( if(layer1=="none") ( layer1="block"; ) else ( layer1="none"; ) document.getElementById("layer1").style.display=layer1 )

Đây là nút ma thuật. Nhấp vào nó sẽ ẩn hoặc hiển thị khối ẩn.

Trong ví dụ này, vị trí của các khối div không thay đổi chút nào. Điều này sử dụng một hàm JavaScript đơn giản để thay đổi giá trị của thuộc tính hiển thị css sau khi nhấp vào nút (sự kiện onclick).

Như bạn có thể thấy, thuộc tính này có thể nhận nhiều giá trị. Vì vậy nó rất hữu ích và có thể được sử dụng để định vị các phần tử. Trong một trong những ví dụ trước, chúng tôi đã sử dụng một trong các giá trị của nó (inline-block ) để căn giữa một div trong div.

Chúng tôi đã sử dụng hai giá trị thuộc tính hiển thị để ẩn và hiển thị lớp.

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à luồng thông thường (còn gọi là luồng tài liệu hoặc luồng 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 bạn không áp dụng thuộc tính vị trí cho một phần tử, nó sẽ ở trạng thái tĩnh và xuất hiện trên trang web theo luồng phần tử chung.

Khi áp dụng các thuộc tính CSS top, left, right hoặc Bottom cho một phần tử được định vị tĩnh, chúng sẽ bị bỏ qua.

Nếu cần, bạn có thể đặt định vị tĩnh trong biểu định kiểu bằng giá trị tĩnh:

Tiêu đề tài liệu p ( vị 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. Các phần tử như vậy sẽ bị xóa khỏi luồng tổng thể; 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. Khi cuộn qua các trang dài, chúng tạo ra hiệu ứng các vật thể bất động vẫn ở nguyên một chỗ:

Tiêu đề tài liệu img ( vị trí: cố định; trên cùng: 5%; bên trái: 40% ) 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ản Thử »

Đị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 bạn áp dụng các thuộc tính trên cùng, trái, phải hoặc dưới cùng cho các phần tử được định vị tương đối, chúng sẽ di chuyển tương ứng với vị trí của chúng, để lại khoảng trống ở vị trí ban đầu của phần 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 đề tài liệu h2 ( vị trí: tương đối; trên cùng: 30px; ) 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.

Tiêu đề tài liệu img ( vị trí: tuyệt đối; phải: 0px; trên cùng: 0px; )

Hãy thay đổi vị trí của logo bằng cách sử dụng định vị tuyệt đối.
Logo bây giờ sẽ nằm ở góc trên bên phải của trang.

Thử "

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.

Tiêu đề tài liệu div ( vị trí: tuyệt đối; chiều rộng: 100px; chiều cao: 100px; ) .div1 ( màu nền: #66FFFF; trái: 70px; trên cùng: 0px; z-index: 1; ) .div2 ( màu nền: # FFFF66; trái: 0px; chỉ mục z: 0; .div3 ( màu nền: #66FF66; trái: 33px; chỉ mục z: 2; ) chỉ số z: 0; chỉ số z: 2;

Như bạn có thể đã biết, bạn có thể bố cục trang web bằng cách sử dụng bảng, trong trường hợp đó trang được chia thành các ô. Bạn cũng có thể sử dụng các khối cho những mục đích này khi trang web bao gồm các thành phần riêng lẻ.

Tôi có lẽ sẽ không nhầm nếu nói rằng một vấn đề nghiêm trọng đối với nhiều quản trị viên web mới làm quen là nhiệm vụ đặt các khối ở một vị trí nhất định trên một trang web.

Một trong những khó khăn chính khi bố trí sử dụng các khối là việc định vị (căn chỉnh) các khối giống nhau.

Một chút về các lớp

Tôi nghĩ nhiều bạn đã nghe nói về một thứ như lớp. Và theo quy định, một lớp được hiểu là một khối được chỉ định bởi thẻ. Trên thực tế, mọi thứ có một chút khác biệt.

Không có lớp trong HTML. Đó chỉ là một phép ẩn dụ. Khi chúng ta nói về các lớp, chúng có nghĩa là một vùng chứa (phần tử) html nhất định có thể được đặt ở một vị trí nhất định trên trang web.

Quan niệm sai lầm thứ hai là chỉ khối được thẻ chỉ định mới được phân loại là một lớp. Điêu nay cung không đung. Chúng cũng có thể bao gồm các đoạn văn (

), danh sách (

Như đã đề cập ở trên, bạn có thể đặt vị trí của bất kỳ thành phần HTML nào. Không cần thiết phải luôn sử dụng thẻ cho việc này. Ngoài ra, việc sử dụng thẻ này không bắt buộc bạn phải đặt nó ở bất kỳ vị trí nào trên trang web.

Ý nghĩa của việc sử dụng một khối được chỉ định bởi một thẻ có liên quan đến việc mở rộng. Rốt cuộc, bạn có thể đặt các phần tử khác bên trong nó (đoạn văn, hình ảnh, v.v.). Điều này tạo ra một khối lớn với nội dung đa dạng, dễ dàng định vị trên trang web hơn nhiều so với từng thành phần riêng lẻ.

Có bốn loại định vị chính:

1. Tĩnh
2. Tuyệt đối
3. Đã sửa
4. Tương đối

Được sử dụng làm vị trí mặc định. Trong trường hợp này, trình duyệt xem mã HTML, chia nó thành các phần tử và tạo một trang từ chúng. Kết quả là một chuỗi gồm một số phần tử. Chúng được hiển thị theo thứ tự được chỉ định trong mã html.

Việc áp dụng các tham số left, top, right và Bottom không mang lại kết quả nào.

Định vị tĩnh phải được ghi nhớ khi sử dụng định vị tương đối.

Sử dụng định vị tuyệt đối, tọa độ của góc trên bên trái của khối được xác định. Trong trường hợp này, tọa độ được tính tương ứng với vị trí của phần tử gốc. Nếu phần tử cha là cửa sổ trình duyệt thì khối sẽ được căn chỉnh tương ứng với nó. Nếu có một phần tử khác chứa khối đó thì sự căn chỉnh sẽ xảy ra tương ứng với phần tử này.

Ngay từ cái tên đã thấy rõ rằng trong trường hợp này phần tử đã được cố định. Nó nằm ở một vị trí cụ thể trên trang web và không di chuyển đi đâu cả. Căn chỉnh này thường được sử dụng cho cửa sổ bật lên, nơi chúng được căn giữa và không di chuyển khi bạn cuộn trang.

Kiểu định vị này có thể khó khăn. Tên của nó không hoàn toàn phù hợp. Nhiều người nhầm lẫn giữa vị trí tương đối và tuyệt đối của các phần tử. Có vẻ như sự căn chỉnh có liên quan đến phần tử gốc. Và trong trường hợp định vị tuyệt đối - liên quan đến cửa sổ trình duyệt. Nhưng điều đó không đúng.

Cần phải hiểu rằng vị trí của phần tử trong trường hợp này xảy ra tương ứng với vị trí của nó ở vị trí tĩnh. Đây là những gì đã được đề cập ở trên.

Nói một cách đơn giản, bạn yêu cầu trình duyệt di chuyển một phần tử thật nhiều pixel so với vị trí của nó theo mặc định.

Có một điểm khó khăn khác. Điều gì xảy ra nếu phần tử cha có vị trí tương đối nhưng phần tử lồng nhau có vị trí tuyệt đối? Trong trường hợp này, tọa độ của phần tử con sẽ được tính tương ứng với phần tử cha, có tính đến độ lệch của nó, nếu có.

Vì vậy, có một thuộc tính vị trí. Thuộc tính này có thể nhận 4 giá trị Tĩnh, Tuyệt đối, Cố định và Tương đối. Mặc định là Tĩnh.

Khi bạn chỉ định tọa độ cho một phần tử, bạn cũng phải cho trình duyệt biết cách tính toán các tọa độ đó. Chúng ta cần cho anh ấy một điểm khởi đầu.

Đừng quên rằng nếu thiếu thuộc tính vị trí, tọa độ sẽ không được tính đến, khối sẽ vẫn ở cùng một vị trí, ở vị trí tĩnh.

Với mục đích này, bốn loại thuộc tính được sử dụng:

1. Hàng đầu
2.Trái
3.Đúng
4. Dưới cùng

Top - giá trị dương (ví dụ: 20px) di chuyển khối xuống 20 pixel. Giá trị âm (-20px) di chuyển phần tử lên 20 pixel. Tất cả điều này xảy ra liên quan đến góc trên bên trái.

Trái - dịch sang trái hoặc phải, tùy theo dấu hiệu. So với góc trên bên trái.

Phải - dịch chuyển sang phải và trái, tùy theo dấu hiệu. So với góc trên bên phải.

Dưới cùng - dịch chuyển lên hoặc xuống, tùy theo dấu hiệu. Xảy ra tương ứng với góc dưới bên trái.

Đây là mã HTML:

Và đây là CSS:

#1 {
vị trí: tương đối;
trên cùng: 100px;
trái:100px;
chiều rộng: 500px;
chiều cao: 500px;
màu nền:#CCCCCC;
}

#11 {
màu nền:#003399;
vị trí: tuyệt đối;
dưới cùng: -30px;
phải: -50px;
chiều rộng: 100px;
chiều cao: 100px;
}

#2 {
màu nền:#990066;
chiều rộng: 200px;
chiều cao:300px
}

Luyện tập.

Trong khi tôi đang viết, tôi đã tự mình tìm ra nó.

Hãy tưởng tượng rằng một nhà phát triển web không cần phải suy nghĩ gì về việc trang hoàn thiện sẽ trông như thế nào về mặt trực quan. Anh ta chỉ đơn giản là viết mã, các phần tử tự sắp xếp trên trang, từ trên xuống dưới (khối) và từ trái sang phải (nội tuyến). Mã được viết càng ở vị trí cao trong tài liệu thì nó sẽ xuất hiện trên trang càng cao.

Nói chung, chúng ta sẽ thấy hành vi tự nhiên của các thành phần và thứ tự chúng được hiển thị trên trang - luồng của tài liệu. Nhưng chúng tôi không hài lòng chút nào với thứ tự này; chúng tôi muốn đặt logo ở góc trên bên trái và nút ở bên phải một chút. Chúng tôi cần kiểm soát hoàn toàn tất cả các yếu tố, chúng tôi quyết định vị trí và cái gì sẽ được đặt. Và để làm được điều này, bạn cần một công cụ (thuộc tính) có thể thay đổi hành vi bình thường của các phần tử trong luồng. Đây là loại tài sản gì?

Trong các kiểu CSS, điều này được gọi là định vị, có thể là tĩnh, tương đối hoặc tuyệt đối.

Với vị trí tương đối, khối di chuyển so với vị trí ban đầu của nó. Tuy nhiên, đã viết vào khối:

Chức vụ: tương đối;

sẽ không có gì xảy ra, nó sẽ vẫn ở nguyên vị trí. Và khối được di chuyển bởi một hệ tọa độ (trên, dưới, trái, phải), với cả giá trị dương và âm.

Bên trong khối màu vàng với lớp khối màu vàng là khối màu đỏ với lớp tương đối khối. Trong luồng thông thường, khối màu đỏ chồng lên khối màu vàng vì nó được viết cuối cùng trong mã.

điểm xuất phát
vị trí tương đối

Chúng ta cần di chuyển khối màu đỏ xuống 10 pixel. Điều này chỉ có thể được thực hiện bằng cách buộc thay đổi vị trí của khối màu đỏ. Đây là cách chúng ta viết top: 10px , nhưng chúng ta cần chỉ ra 10 pixel này sẽ được tính từ đâu?

Bằng cách viết vị trí: tương đối, chúng ta làm rõ rằng chúng ta đang tính tương đối với vị trí hiện tại của nó.

Khối màu vàng (
màu nền: #ffe70f;
}

Khối tương đối (
vị trí: tương đối;
trên cùng: 10px;
màu nền: #ed5b77;
}

Trong hình, chúng ta thấy khối màu đỏ đã di chuyển xuống như thế nào, giảm 10 pixel so với vị trí ban đầu.

Nếu bạn xóa vị trí: tương đối khỏi mã, khối sẽ vẫn giữ nguyên. Và nếu thay vì tương đối, chúng ta viết tuyệt đối thì theo mặc định, 10 pixel này sẽ được tính từ cạnh của cửa sổ trình duyệt và kết quả là khối của chúng ta, ngược lại, sẽ tăng lên, chạm đến cạnh dưới cùng của trình duyệt. Và đây không phải là một phần trong kế hoạch của chúng tôi.

Trong hình, khối được định vị tuyệt đối, đây là khi hệ tọa độ được đo từ mép của trình duyệt. Bằng cách thay thế chỉ một từ, chúng ta đã thay đổi vị trí của khối.

Vị trí: tuyệt đối;

Có một điều đặc biệt. Định vị tuyệt đối cũng ảnh hưởng đến các phần tử nội tuyến. Nếu bạn đặt vị trí: tuyệt đối cho phần tử nội tuyến, nó sẽ hoạt động giống như phần tử khối. Đây là một thuộc tính tương tự - display: block.

Đó chưa phải là tất cả, phần tử "tuyệt đối" nằm bên trong phần tử cha "tương đối" thay đổi điểm tham chiếu tọa độ của nó và bắt đầu được định vị cách xa phần tử cha.

vị trí: tương đối

vị trí: tuyệt đối;

Một khối có lớp tuyệt đối chặn nằm bên trong khối màu vàng gốc.

Khối màu vàng (
vị trí: tương đối;
phần đệm: 10px;
màu nền: #ffe70f;
}

Vì khối màu vàng có vị trí tương đối nên khối màu đỏ có vị trí tuyệt đối sẽ bị dịch chuyển so với khối màu đỏ bởi các pixel được chỉ định.

Khối tuyệt đối (
vị trí: tuyệt đối;
dưới cùng: 10px;
trái: 10px;
màu nền: #ed5b77;
}

Khi cuộn trang, một khối có vị trí: cố định sẽ được giữ nguyên, thông thường phương pháp này được sử dụng để cố định thanh điều hướng.

Giải quyết thứ tự của các khối "tuyệt đối" chồng chéo. Chúng ta muốn khối màu đỏ nằm trên khối màu vàng, sau đó chúng ta chỉ định z-index: 2 cho màu đỏ và z-index: 1 cho màu vàng.

Màu đỏ
Màu vàng

Khối-đỏ (
vị trí: tương đối;
chỉ số z: 2;
màu nền: #ffe70f;
}

Khối màu vàng (
vị trí: tuyệt đối;
trên cùng: 20px;
chỉ số z: 1;
màu nền: #ed5b77;
}

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ó.

Thuộc tính vị trí cho phép bạn chỉ định 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ế.

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 định vị tương đối được di chuyển từ vị trí bình thường của nó theo các hướng khác nhau so với ranh giới của vùng chứa chính của nó, nhưng 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 các phần tử con trong một 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ị tương ứng 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ị chồng lên bởi các phần tử khác (do thuộc tính z-index). 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 được loại bỏ 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á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.

Đối với khối vùng 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.

.wrap ( đệm: 10px; chiều cao: 150px; vị trí: tương đối; nền: #e7e6d4; text-align: right; border: 3px nét đứt #645a4e; ) .white ( vị trí: tuyệt đối; chiều rộng: 200px; trên cùng: 10px; bên trái : 10px; phần đệm: 10px; nền: #ffffff;
Cơm. 2. Định vị tương đối tuyệt đối

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. Đối với một phần tử có vị trí: tuyệt đối hoặc vị trí: cố định, bạn không thể đặt đồng thời thuộc tính float, nhưng đối với một phần tử có vị trí: tương đối, bạn 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.

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à các phần tử nội tuyến sẽ di chuyển sang phải hoặc trái, giải phóng không gian cho nó và di chuyển xung quanh nó.

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 phần đệm bên trong được chỉ định cho khối container thì khối nổi sẽ được đặt cách nhau từ cạnh của khối container ở khoảng cách đã chỉ định.

Thuộc tính tự động thay đổi giá trị được tính toán (hiển thị trên trình duyệt) của thuộc tính display thành display: block cho các giá trị sau: inline , inline-block , table-row , table-row-group , table-column , table-column-group , ô bảng . chú thích bảng , nhóm tiêu đề bảng , nhóm chân bảng . 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ẽ cho phép trình duyệt tạo không gian cho nội dung khác. 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, lề dọc của các phần tử float không bị thu gọn với lề của các phần tử lân cận, không giống như các phần tử khối thông thườ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;).

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ó.

.container ( đệm: 20px; nền: #e7e6d4; viền: 3px nét đứt #645a4e; ) .floatbox ( float: left; width: 300px; Height: 150px; lề-phải: 20px; đệm: 0 20px; nền: #ffffff ; đường viền: nét đứt 3px #666666; Cơm. 4. “Hiệu ứng thu gọn” của khối container

Giả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 vùng chứa.

.container ( đệm: 20px; nền: #e7e6d4; viền: 3px nét đứt #645a4e; ) .floatbox ( float: left; width: 300px; Height: 150px; lề-phải: 20px; đệm: 0 20px; nền: #ffffff ; đường viền: nét đứt 3px #666666; .clearfix:after ( nội dung: ""; hiển thị: khối; chiều cao: 0; xóa: cả hai; khả năng hiển thị: ẩn; )

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

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:last-child (lề phải: 0;) Hình. 6. Dọn dẹp luồng danh sách ngang