Định vị bên trong div. Định vị trong CSS

Từ tác giả: Xin chào. Định vị các thành phần CSS là một chủ đề rất quan trọng trong việc xây dựng trang web. Trong bài viết này, tôi đề xuất xem xét nó chi tiết hơn, tất cả các cách để di chuyển các khối xung quanh một trang web.

Nếu chúng ta nói về vị trí của các phần tử khối, thì nó được đặt bằng thuộc tính vị trí. Nó có bốn ý nghĩa và mỗi ý nghĩa đều đáng được xem xét riêng biệt.

Đây là loài đầu tiên được biết đến. Nó được thiết lập như thế này: vị trí: tuyệt đối. Sau đó, khối mất đi các thuộc tính thông thường và hoàn toàn rơi ra khỏi dòng chảy bình thường. Luồng này là gì? Hãy thử đặt một số phần tử khối liên tiếp trong phần đánh dấu của bạn. Họ sẽ trở nên thế nào? Lần lượt, và không còn cách nào khác.

Đây là hành vi bình thường của các khối theo mặc định. Nhưng điều gì sẽ xảy ra với một khối đã được xác định vị trí tuyệt đối? Nó hoàn toàn rơi ra khỏi dòng chảy bình thường, các khối khác chỉ đơn giản là ngừng chú ý đến nó, như thể nó chưa từng tồn tại, nhưng phần tử vẫn còn trên trang. Định vị tuyệt đối trong CSS thường được sử dụng để đặt chính xác các thành phần trang trí, biểu tượng và các nội dung thiết kế khác.

Bây giờ nó có thể được di chuyển bằng cách sử dụng các thuộc tính trái, phải, trên và dưới. Theo mặc định, chuyển động tương đối với các cạnh của cửa sổ trình duyệt, nhưng nếu phần tử cha có vị trí: tương đối thì chuyển động sẽ tương đối với khối cha.

Chặn( vị trí: tuyệt đối; dưới cùng: 0; phải: 0; )

Phần tử sẽ được chuyển xuống góc dưới bên phải. Tôi nhận thấy rằng họ thường làm nút trên cùng theo cách này - họ chỉ đặt nó ở ngay góc. Đây là một ví dụ khác trong đó tôi sẽ hiển thị đánh dấu có thể có trước:

Và bây giờ là kiểu css cho đoạn này:

#wrapper(vị trí: tương đối; ) .block(vị trí: tuyệt đối; top: 0; phải: 10px; )

Trong ví dụ này, trước tiên chúng tôi đã chỉ định vị trí tương đối cho vùng chứa chính (tương đối - sẽ nói thêm về điều đó ở phần sau của bài viết), sau đó đặt vị trí tuyệt đối cho cùng một element.block. Do đó, tọa độ sẽ được tính không phải từ chính cửa sổ trình duyệt mà từ các cạnh của phần tử cha, tức là khối bao bọc.

Đây là loại tiếp theo và nó được viết như sau – vị trí: tương đối. Tọa độ được xác định bởi các thuộc tính tương tự như đối với vị trí tuyệt đối. Sự khác biệt đáng kể duy nhất là phần tử không chính thức rơi ra khỏi dòng - vẫn còn khoảng trống cho nó.

Hoạt động của giá trị này có thể được so sánh với khả năng hiển thị: ẩn, khi phần tử bị ẩn khỏi trang, nhưng khoảng trống bên dưới nó vẫn không bị ảnh hưởng. Điều tương tự cũng xảy ra với vị trí tương đối - khối có thể được di chuyển đến bất kỳ đâu, nhưng không gian dành cho nó vẫn trống và sẽ không bị các phần khác chiếm giữ.

Điều quan trọng cần biết là phần bù không xảy ra từ các cạnh của cửa sổ trình duyệt web mà từ vị trí ban đầu của khối. Đó là:

Chặn( vị trí: tương đối; trên cùng: 10px; phải: 50px; )

Khối sẽ di chuyển 50 pixel sang phải và 10 pixel sang trái.

Có lẽ bạn đã nhiều lần nhìn thấy trên các trang web trên Internet khi cuộn, một số biểu ngữ không biến mất mà vẫn tiếp tục nằm trong vùng hiển thị của bạn, như thể bị kẹt ở một chỗ. Điều này chủ yếu được thực hiện bằng cách sử dụng vị trí cố định. Để làm điều này bạn cần phải viết:

Loại cuối cùng là tĩnh, đây là hoạt động bình thường của các phần tử khối. Không cần phải chỉ định vì nó được mặc định nhưng bạn vẫn cần biết về giá trị thứ tư. Đôi khi vị trí: tĩnh được viết để ghi đè một loại định vị khác khi một số sự kiện nhất định xảy ra trên trang web.

Chúng ta đã thảo luận về ý nghĩa, nhưng điều này vẫn chưa đủ để khép lại chủ đề này cho chính chúng ta. Trên thực tế, bạn cần hiểu vị trí và loại định vị nào cần được áp dụng. Tôi đã cho bạn một ví dụ về tính năng cố định - nó có thể được sử dụng để tạo các cột, đầu trang hoặc chân trang cố định.

Định vị tương đối sẽ hữu ích khi bạn cần di chuyển nhẹ một khối so với vị trí của nó và đồng thời duy trì vị trí của nó trong luồng. Nó cũng được trao cho các khối cha để sử dụng chuyển động tuyệt đối cho các phần tử con.

Thuộc tính vị trí không giải quyết được tất cả các vấn đề về vị trí của các phần tử khối. Ví dụ: bạn sẽ tạo lưới trang web bằng cách sử dụng nó như thế nào? Tôi không có ý tưởng hay nào cả. Đây là nơi các tài sản khác đến giải cứu.

Lưới thường được tạo bằng cách sử dụng float trong CSS. Thuộc tính cho phép bạn nhấn một khối vào cạnh trái hoặc phải của phần tử gốc (float: left, float: right), cho phép một số thành phần khối xếp thành một dòng, điều này phổ biến trên bất kỳ trang web nào.

Việc căn giữa được thực hiện như thế này: khối cần ghi một chiều rộng nhất định, sau đó đặt thuộc tính tự động lề: 0. Chính giá trị tự động sẽ căn chỉnh nó theo chiều ngang chính xác ở giữa. Đương nhiên, để làm được điều này, nó phải là sản phẩm duy nhất trong dòng của nó, nếu không sẽ không có gì hiệu quả.

Tất cả các loại định vị được liệt kê trong bài viết này đều có thể hữu ích cho nhà phát triển web. Nơi nào đó bạn cần chèn một biểu tượng (vị trí: tuyệt đối), nơi nào đó bạn cần điều chỉnh một chút vị trí của khối, để lại một khoảng trống phía sau nó (vị trí: tương đối) và nơi nào đó bạn cần sửa tiện ích (vị trí: cố định). Nhìn chung, kiến ​​thức về tính chất này chắc chắn sẽ không thừa.

Chà, để tìm hiểu nhiều hơn nữa từ thế giới xây dựng trang web, hãy nhớ đăng ký blog của chúng tôi và nhận tài liệu đào tạo mới. Tôi cũng khuyên bạn nên xem chủ đề của chúng tôi, nơi một chủ đề tương tự cũng được nêu ra. (vị trí của các phần tử)

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:

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 nhược điểm 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 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.

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

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

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 một div trông như thế nào:

#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 chỉnh 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; )

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

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

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 đề đặt ra 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 triển khai 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.

Thuộc tính vị trí có các giá trị sau
tĩnh tương đối tuyệt đối cố định
Chỉ các thuộc tính được áp dụng cùng với nó (ngoại trừ vị trí: tĩnh;)
trên dưới bên phải trái
Có thể có mặt cùng lúc
biến đổi lề float (loại trừ vị trí: tuyệt đối; và vị trí: cố định;)

.primer ( border: 4px Solid #456; width: 200px; Background: #fff; location: cố định; vị trí: tĩnh; vị trí: tương đối; vị trí: tuyệt đối; lề: 15px -15px -15px 15px; -moz-transform: dịch (15px, 15px); -webkit-transform: dịch(15px, 15px); -o-transform: dịch(15px, 15px); -ms-transform: dịch(15px, 15px trên cùng: 15px; 15px; trái: 15px; đường viền: 4px nền #087e11;

Thêm một thẻ trống trước div bằng class="primer" - .

Các thành phần trên một trang web chiếm một khoảng không gian nhất định. Bằng cách tương tự với những con tàu trong trò chơi "Chiến hạm". Giữa các tàu nên có ô trống - lề.

Để đặt một phần tử lên trên phần tử khác, bạn cần đặt giá trị âm cho lề. Nhưng khi đó nội dung của các thẻ sẽ chồng chéo lên nhau. Sử dụng vị trí và thuộc tính, chúng dường như được nâng lên cấp 2.

Theo thứ tự tự nhiên, các thẻ dưới cùng trong mã được hiển thị phía trên các thẻ trên cùng. Nhờ chỉ mục z ở cấp 2, bạn có thể tự xác định phần tử hiển thị.

vị trí: tĩnh là mặc định và ghi đè tương đối, tuyệt đối và cố định. Các giá trị của thuộc tính top, Bottom, right, left đều bị bỏ qua. Nếu không có biến đổi, chỉ số z sẽ không được tính đến.

chỉ số z: 3; ) .svetlyi2 ( màu nền: #fff; chiều rộng: 250px; z-index: 2; lề: 0px -30px -30px 30px; ) .svetlyi3 ( màu nền: #f5f5dc; chiều rộng: 250px; chỉ mục z: 1 ; ) A B C

Khối mà chúng ta gán vị trí: tương đối sẽ được ưu tiên. Nội dung của phần tử dưới cùng bị ẩn.

lề: 0px -60px -30px 60px; vị trí: tương đối; A B C

Để đặt khối B lên trên khối B, nhưng bên dưới A, việc gán vị trí: tương đối cho nó là không đủ, vì trong mã nó nằm dưới khối A, nghĩa là nó sẽ chồng lên nhau.

.temnyi ( màu nền: #666; chiều rộng: 500px; căn chỉnh văn bản: giữa; cỡ chữ: 250%;) .svetlyi1 ( màu nền: #ccc; chiều rộng: 250px; lề: 0px -60px -30px 60px ; vị trí: tương đối; ) .svetlyi2 ( màu nền: #fff; chiều rộng: 250px; lề: 0px -30px -30px 30px; vị trí: tương đối; ) .svetlyi3 ( màu nền: #f5f5dc; chiều rộng: 250px; ) B C

Bạn cũng cần đặt chỉ mục z cho phần tử B nhỏ hơn chỉ số z của khối A.

.temnyi ( màu nền: #666; chiều rộng: 500px; căn chỉnh văn bản: giữa; cỡ chữ: 250%;) .svetlyi1 ( màu nền: #ccc; chiều rộng: 250px; lề: 0px -60px -30px 60px ; ) .svetlyi2 ( màu nền: #fff; chiều rộng: 250px; lề: 0px -30px -30px 30px; ) .svetlyi3 ( màu nền: #f5f5dc; chiều rộng: 250px; ) A B C

Thay vì sử dụng lề để định vị tương đối, đôi khi sử dụng các thuộc tính trên, dưới, phải, trái sẽ tốt hơn. Điểm bắt đầu của chúng là vị trí ban đầu của phần tử. Đồng thời, khối B tiếp tục được định vị như thể khối A ở cùng một vị trí - nó để lại khoảng trống cho nó. Do đó, bạn không cần phải thực hiện bất kỳ phép thuật nào với div() trống.

.temnyi ( màu nền: #666; chiều rộng: 500px; căn chỉnh văn bản: giữa; cỡ chữ: 250%;) .svetlyi1 ( màu nền: #ccc; chiều rộng: 250px; trên cùng: 30px; trái: 60px; vị trí: tương đối; z-index: 2; ) .svetlyi2 ( màu nền: #fff; chiều rộng: 250px; lề: 0px -30px -30px 30px; vị trí: tương đối; z-index: 1; ) .svetlyi3 ( nền- màu: #f5f5dc; chiều rộng: 250px;

Hoàn toàn tương tự với tài sản

.temnyi ( màu nền: #666; chiều rộng: 500px; căn chỉnh văn bản: giữa; cỡ chữ: 250%;) .svetlyi1 ( màu nền: #ccc; chiều rộng: 250px; biến đổi: dịch (60px, 30px) ; chỉ mục z: 2; .svetlyi2 ( màu nền: #fff; chiều rộng: 250px; lề: 0px -30px -30px 30px; vị trí: tương đối; z-index: 1; ) .svetlyi3 ( màu nền: # f5f5dc ; chiều rộng: 250px;

Các phần tử lề tích hợp không bị dịch chuyển lên hoặc xuống (). Chỉ trên, dưới

trên cùng: 30px; vị trí: tương đối; BAB hoặc
.temnyi ( màu nền: #666; chiều rộng: 500px; cỡ chữ: 250%;) .svetlyi1 ( màu nền: #ccc; chiều rộng: 250px; biến đổi: dịch (0px, 30px); ) .svetlyi2 ( nền -màu sắc: #fff; chiều rộng: 250px;

B A B

Có vẻ như một khối có vị trí: tuyệt đối phải được đặt phía trên vị trí: tương đối, nhưng thực tế không phải vậy, trật tự tự nhiên được áp dụng ở đây. Điều này có nghĩa là chỉ mục z sẽ cho phép bạn chọn phần tử ưu tiên giữa chúng.

.temnyi ( màu nền: #666; chiều rộng: 500px; căn chỉnh văn bản: giữa; cỡ chữ: 250%;) .svetlyi1 ( màu nền: #ccc; chiều rộng: 250px; lề: 0px -60px -30px 60px ; vị trí: tương đối; ) .svetlyi2 ( màu nền: #fff; chiều rộng: 250px; lề: 0px -30px -30px 30px; vị trí: tuyệt đối; ) .svetlyi3 ( màu nền: #f5f5dc; chiều rộng: 250px; ) B C

Khối B bỏ qua vị trí ban đầu của khối B, bởi vì với vị trí: tuyệt đối và vị trí: cố định, phần tử sẽ không còn ảnh hưởng đến các thẻ lân cận thông qua chiều rộng/chiều cao hoặc thông qua float: left.

.temnyi ( màu nền: #666; chiều rộng: 500px; căn chỉnh văn bản: giữa; cỡ chữ: 250%;) .svetlyi1 ( màu nền: #ccc; chiều rộng: 250px; lề: 0px -60px -30px 60px ; vị trí: tương đối; z-index: 2; .svetlyi2 ( màu nền: #fff; chiều rộng: 250px; lề: 0px -30px -30px 30px; vị trí: tuyệt đối; z-index: 1; ) .svetlyi3 ( nền - màu: #f5f5dc; chiều rộng: 250px; lề trên: 20px ) A B C

Bây giờ, để củng cố tài liệu, hãy nhấp vào các nút ở đầu bài viết, nghĩ xem tại sao lại xảy ra những thay đổi như vậy.

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.

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ỉ phân loại khối được thẻ chỉ định thành các 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 (

) và các phần tử khác.
Và bây giờ là về ah.

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 biệt.

Định vị các phần tử.

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

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

Tĩnh

Đượ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.

tuyệt đố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 đượ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.

đã sửa

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.

Liên quan đến

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 phần bù của nó, nếu có.

Tóm tắt.

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.


Bây giờ hãy xem tọa độ được thiết lập như thế nào.

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

Định vị các khối CSS là một trong những giai đoạn bố cục quan trọng nhất, bởi vì đây là yếu tố ảnh hưởng đến khả năng thích ứng của trang web hoặc khả năng triển khai nó trong tương lai (nếu hiện tại không cần thiết) và cũng có tác động đáng kể đến mở rộng quy mô hơn nữa của trang web. Không có gì lạ khi những “nhà thiết kế bố cục tương lai” tạo ra một bố cục mà cuối cùng thì việc vứt nó đi sẽ dễ dàng hơn là thay đổi thứ gì đó, nhưng đồng thời nó có thể trông hoàn toàn phù hợp với bố cục. Tình trạng này phát sinh do thiếu hiểu biết về vị trí và thời điểm sử dụng loại định vị này hoặc loại định vị kia. Hôm nay chúng ta sẽ cố gắng hiểu vấn đề này. Và như vậy, trong CSS có thuộc tính vị trí. Thuộc tính này có thể nhận 5 giá trị, nhưng chúng ta sẽ xem xét 4 giá trị chính:

• tuyệt đối
• tĩnh
• liên quan đến
• đã sửa
Định vị tuyệt đối các khối (absolute)

Phương pháp định vị đầu tiên trong danh sách của chúng tôi là tuyệt đối. Khi gán thuộc tính này, khối sẽ trở thành một đơn vị riêng và các thành phần trang khác không ảnh hưởng đến vị trí của nó và nó cũng không ảnh hưởng đến các thành phần khác. Kích thước khối được xác định bởi thuộc tính chiều rộng và chiều cao và vị trí trên trang được xác định bởi thuộc tính trên cùng. trái, phải và dưới các tham số này chỉ định phần đệm từ các cạnh trên, trái, phải và dưới. Nếu khối không có phần tử cha và nếu vị trí của phần tử cha không phải là tĩnh thì các thuộc tính trên, trái, dưới, phải sẽ đặt thụt lề từ đầu trang, nếu không thì từ các cạnh của trang. phần tử cha.

Thông thường, kiểu định vị này được sử dụng khi khối cần được nhấn vào cạnh phải hoặc cạnh dưới. Hãy xem xét cách bố trí này.

Để thuận tiện, các khối được đánh dấu bằng khung nhiều màu. Đánh dấu sẽ trông như thế này:

XHTML

Mối quan hệ ( vị trí: tương đối; ) .màu vàng ( vị trí: tuyệt đối; phải: 10px; dưới cùng: 10px; )

Mối quan hệ vị trí: tương đối; Màu vàng vị trí: tuyệt đối; phải : 10px ; dưới cùng: 10px;

Trong ví dụ này, chúng tôi đã sử dụng thuộc tính right và Bottom để đặt offset từ cạnh phải và cạnh dưới. Các giá trị thuộc tính này tương đương với các giá trị trên cùng: Chiều cao phần tử - 10px và bên trái: Chiều rộng phần tử - 10px.

Ngoài ra, định vị tuyệt đối đôi khi được sử dụng khi cần “tác động” một yếu tố này lên yếu tố khác.

Định vị tĩnh (tĩnh)

Loại định vị phổ biến nhất xảy ra trên mọi trang và thường được đặt cho hầu hết các thành phần là tĩnh, được viết bằng css dưới dạng tĩnh. Đối với hầu hết các thẻ HTML, giá trị này được xác định theo mặc định, tức là. nếu vị trí không được chỉ định rõ ràng, giá trị sẽ là tĩnh. Với sự sắp xếp này, các phần tử được xếp chồng lên nhau và tọa độ trong cửa sổ của mỗi phần tử phụ thuộc vào phần tử gần nhất có vị trí: tĩnh hoặc vị trí: tương đối. Các thuộc tính trên, trái, phải, dưới sẽ không hoạt động với vị trí này; vị trí bị thay đổi do thuộc tính lề.

Định vị tương đối

Kiểu định vị này rất giống với định vị tĩnh, ngoại trừ vị trí của phần tử có thể được thay đổi với các thuộc tính trên, trái, phải, dưới và lề.

Định vị cố định

Định vị cố định tương tự như định vị tuyệt đối về cách chỉ định tọa độ, nhưng vị trí được tính không liên quan đến trang HTML mà liên quan đến cửa sổ trình duyệt, tức là. với thuộc tính top: 10px, bạn sẽ đặt lề trên thành 10px TỪ CỬA SỔ TRÌNH DUYỆT và cho dù bạn đang ở cấp độ cuộn trang nào, phần tử này sẽ luôn theo màn hình của bạn.

Thường được sử dụng cho các yếu tố điều hướng để người dùng luôn có thông tin quan trọng hoặc liên kết đến các trang thú vị trong tầm mắt.