Thiết lập float cho phần tử inline
Ở phần trên đã thực hiện float một hình ảnh, phần này sẽ thực hiện float một phần tử inline chứa văn bản, ví dụ phần tử span. Mặc dù cả img và span đều là phần tử inline, nhưng chúng cũng có những đặc điểm khác nhau.
[HTML]
<p><span class="info">Nhiệt độ trung bình tháng ở Đà Lạt không bao giờ vượt quá 20°C, ngay cả trong những tháng nóng nhất.</span>Thành phố Đà Lạt là tỉnh lỵ của tỉnh Lâm Đồng, nằm trên cao nguyên Lâm Viên, thuộc vùng Tây Nguyên, Việt Nam. Từ xa xưa, vùng đất này vốn là địa bàn cư trú của những cư dân người Lạch, người Chil và người Srê thuộc dân tộc Cơ Ho. Cuối thế kỷ 19, khi tìm kiếm một địa điểm để xây dựng trạm nghỉ dưỡng dành cho người Pháp ở Đông Dương, Toàn quyền Paul Doumer đã quyết định chọn cao nguyên Lâm Viên theo đề nghị của bác sĩ Alexandre Yersin, người từng thám hiểm tới nơi đây vào năm 1893</p>
[CSS]
span.info {
float: right;
margin: 10px;
width: 200px;
color: #fff;
background-color: #9d080d;
padding: 4px;
}
p {
padding: 15px;
background-color: #fff799;
border: 2px solid red;
}
Xem hình kết quả,
Một số lưu ý khi thực hiện float phần tử inline,
– Luôn thiết lập chiều rộng cho phần tử inline, như ở ví dụ trên, phần tử span được thiết lập width: 200px, nếu không thiết lập, chiều rộng của phần tử inline có thể rất rộng, hoặc rất hẹp và kết quả là không thể kiểm soát được bố cục chung. Mặc dù phần tử img là một phần tử inline, nhưng vì nó được kế thừa thuộc tính width nên có thể không cần thiết lập chiều rộng.
– Khi được float, phần tử inline sẽ được đối xử như một phần tử block. Do vậy, ở ví dụ trên, vẫn thiết lập được margin top và bottom, mặc dù theo đặc tả của một phần tử inline thì không thể thực hiện được việc này.
– Khi được float, margin top và bottom của hai phần tử cạnh nhau (theo chiều dọc) không bị thu gọn (collapse).
Thiết lập float cho phần tử block
Khi float phần tử block, cần để ý hai đặc điểm sau,
– Luôn thiết lập chiều rộng cho phần tử kiểu block, nếu không, chiều rộng của phần tử sẽ ở chế độ auto, và nó sẽ chiếm hết chiều rộng của cửa sổ trình duyệt hoặc phần tử chứa nó. Nếu phần tử được float lại chiếm hết chiều rộng của phần tử chứa nó thì sẽ không còn ý nghĩa gì nữa, vì mục đích của float là để văn bản bao bọc quanh phần tử, chứ không phải nằm dưới phần tử.
– Khi một phần tử được float, nó sẽ trôi dạt về phía phải hoặc phía trái một cách tương đối ngay tại vị trí của nó trong mã nguồn, và cho phép các phần tử sau nó bao bọc xung quanh. Nghĩa là, nó sẽ nằm dưới các phần tử block nằm trước nó trong mã nguồn. Như vậy, không thể float một phần tử lên hai góc trên của trang web, trừ khi nó nằm ở đầu mã nguồn.
Ngắt ảnh hưởng của float
Để ngắt ảnh hưởng của chế độ float, nhằm đưa văn bản bao quanh về chế độ hiển thị thông thường, sử dụng thuộc tính clear.
Khi gắn thuộc tính clear vào phần tử nào thì phần tử đó sẽ không còn bị tác động bởi thuộc tính float đã được thiết lập ở phía trên, nghĩa là, nó không nằm cạnh phần tử float, mà sẽ được tách xuống một vùng mới, nằm dưới phần tử float.
Dưới đây là một số đặc tính của clear,
– Giá trị: left | right | both | none | inherit
– Mặc định: none
– Áp dụng: phần tử kiểu block
– Kế thừa: không
Lưu ý, thuộc tính clear được gắn vào phần tử bên dưới, chứ không gắn vào chính phần tử float. Phần tử nào có giá trị clear là left sẽ giúp nó không còn bị ảnh hưởng bởi chế độ float: left được thiết lập ở phía trên nó. Phần tử nào có giá trị clear là right sẽ giúp nó không còn bị ảnh hưởng bởi chế độ float: right được thiết lập ở phía trên nó. Nếu phía trên có nhiều phần tử được float (có thể cả left và right), thì thiết lập giá trị cho clear là both để đảm bảo chắc chắn không còn bị ảnh hưởng bởi chế độ float nữa.
Ví dụ,
[HTML]
<p><span class="info">Nhiệt độ trung bình tháng ở Đà Lạt không bao giờ vượt quá 20°C, ngay cả trong những tháng nóng nhất.</span>Thành phố Đà Lạt là tỉnh lỵ của tỉnh Lâm Đồng, nằm trên cao nguyên Lâm Viên, thuộc vùng Tây Nguyên, Việt Nam. Từ xa xưa, vùng đất này vốn là địa bàn cư trú của những cư dân người Lạch, người Chil và người Srê thuộc dân tộc Cơ Ho. Cuối thế kỷ 19, khi tìm kiếm một địa điểm để xây dựng trạm nghỉ dưỡng dành cho người Pháp ở Đông Dương, Toàn quyền Paul Doumer đã quyết định chọn cao nguyên Lâm Viên theo đề nghị của bác sĩ Alexandre Yersin, người từng thám hiểm tới nơi đây vào năm 1893</p>
<h1>Thông tin về Đà lạt</h1>
[CSS]
span.info {
float: left;
margin: 10px;
width: 200px;
height: 300px;
color: #fff;
background-color: #9d080d;
padding: 4px;
}
p {
padding: 15px;
background-color: #fff799;
border: 2px solid red;
}
h1 {
clear: left;
}
Xem hình minh họa,
Lab2.5.a (exercise 15-1, p.348 [3])
Float nhiều phần tử
Có thể thiết lập float cho nhiều phần tử trong một trang hoặc trong một phần tử. Một trong những áp dụng của kĩ thuật này là chuyển một danh sách các liên kết (list) thành một thanh trình đơn (menu) nằm ngang. Khi thiết lập float cho nhiều phần tử, CSS sẽ có cơ chế xử lý để đảm bảo các phần tử float không bị chồng lấn lên nhau, điểm quan trọng cần để ý là các phần tử float sẽ được trôi dạt tuần tự về phía trái, hoặc phải (tùy theo kiểu float) và từ trên xuống dưới.
Quan sát ví dụ sau,
[HTML]
<p>P1</p>
<p style="height: 200px;" class="float">P2</p>
<p style="height: 230px;" class="float">P3</p>
<p style="height: 250px;" class="float">P4</p>
<p style="height: 200px;" class="float">P5</p>
<p>P6</p>
<p>P7</p>
<p>P8</p>
<p>P9</p>
<p>P10</p>
[CSS]
p.float {
float: left;
width: 200px;
margin: 0px;
background: #ccc;
}
p {
border: 1px solid red;
}
Xem hình kết quả,
Ở hình trên, ba phần tử float đầu tiên được trôi dạt về phía trái, xếp tuần tự trên cùng một hàng. Phần tử float thứ tư, do không đủ chỗ nên được chuyển xuống dưới và trôi dạt về phía trái, cho tới khi nào gặp phải vật cản thì dừng lại, ở ví dụ trên là gặp phải cạnh trái của cửa sổ trình duyệt. Tuy nhiên, nếu một trong các phần tử float có chiều dài đủ lớn thì nó sẽ là vật cản cho các phần tử float phía dưới. Ví dụ, thử tăng height của P2 lên 600px rồi quan sát kết quả (phần tử thứ tư sẽ bị chặn trái bởi P2).
Dưới đây là áp dụng vào thực tế, sẽ tạo một trình đơn nằm ngang từ danh sách không thứ tự (unordered list). Để đơn giản, ví dụ đã bỏ qua giá trị URL của phần tử a.
[HTML]
<ul>
<li><a href="#">Thời sự</a></li>
<li><a href="#">Văn hóa</a></li>
<li><a href="#">Kinh tế</a></li>
<li><a href="#">Giáo dục</a></li>
<li><a href="#">Thể thao</a></li>
</ul>
[CSS]
– Bỏ dấu đầu dòng (bullet), thiết lập padding và margin cho vùng chứa thanh trình đơn (phần tử ul) bằng 0,
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
– Sử dụng kĩ thuật float nhiều phần tử để float các mục của danh sách (list item), kết quả là các mục sẽ nằm trên cùng một hàng ngang,
ul li {
float: left;
}
– Sử dụng thuộc tính display để chuyển phần tử a từ dạng inline sang dạng block, mục đích là để thực hiện định dạng chiều cao, chiều rộng, padding, margin và các định dạng khác cho mỗi mục của trình đơn,
ul li a {
color: #6e448e;
display: block;
text-decoration: none;
background-color: #e5e5e5;
margin-left: 4px;
padding: 4px 8px;
}
ul li a:hover {
background-color: #f5f5f5;
color: #88bfe1;
}
– Thiết lập thuộc tính clear cho phần tử tiếp sau trình đơn để xóa bỏ chế độ float, đưa các phần tử về chế độ hiển thị thông thường.
Phần tử chứa các float
Như đã biết, thuộc tính float sẽ làm trôi dạt phần tử bên trong một phần tử khác, mục đích là để nội dung văn bản sẽ bao quanh phần tử được float, tuy nhiên, đôi khi việc float cũng gây ra những kết quả không như mong muốn.
Ví dụ, hãy thêm đường viền cho phần tử ul ở phần tạo trình đơn phía trên,
ul {
…
border: solid 2px yellow;
}
Quan sát kết quả trên trình duyệt, sẽ thấy phần tử ul bị thu lại chỉ còn là một đường kẻ ngang. Nghĩa là, các phần tử li đã bị tràn hết ra ngoài phần tử ul. Kết quả là không thể định dạng được màu nền, kích thước, các hiệu ứng cho ul.
Vấn đề bây giờ là làm sao để phần tử chứa các float sẽ dãn ra, để chứa trọn các phần tử float? Dưới đây là hai cách khá đơn giản và hay được sử dụng.
Cách đầu tiên là thiết lập luôn thuộc tính float cho phần tử chứa các float, và thiết lập chiều rộng cho nó là 100%,
Ví dụ,
ul {
list-style-type: none;
padding: 0;
margin: 0;
width: 100%;
float: left;
border: solid 2px yellow;
}
Cách thư hai là thiết lập thuộc tính overflow: auto hoặc overflow: hidden cho phần tử chứa các float, và thiết lập chiều rộng cho nó là 100%,
Ví dụ,
ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
/*overflow: auto;*/
float: left;
border: solid 2px yellow;
}
Lab2.5.b (exercise 15-2, p.353 [3])
Sử dụng kĩ thuật float để tạo các cột
Ở các phần trước đã thực hiện float các phần nội dung nhỏ, phần này sẽ thực hiện float các vùng nội dung lớn hơn, để tạo ra các cột cho trang web.
Sau đây là một số cách để tạo ra hai cột cho trang web,
– Float một div, thêm margin đủ rộng cho phần văn bản bao quanh div vừa được float
– Float cả hai div sang trái, hoặc phải
– Float một div sang trái, một div sang phải
Để chia trang web thành ba cột, cách làm tương tự, cần chú ý tính toán về kích thước cho hợp lý.
Dù chọn cách nào trên đây để chia cột cho trang web thì cũng cần để ý một số vấn đề sau:
– Phải thiết lập độ rộng (width) cho phần tử được float
– Cần tính toán độ rộng cẩn thận, bao gồm cả padding, border và margin. Nếu tổng chiều rộng của các cột lớn hơn độ rộng của cửa sổ trình duyệt (hoặc phần tử chứa) thì cột cuối cùng sẽ không đủ chỗ và bị rớt xuống phía dưới
Hạn chế của kĩ thuật chia cột bằng float là nó bị phụ thuộc vào thứ tự của các vùng nội dung trong mã nguồn. Vùng nội dung được float phải xuất hiện trước phần nội dung bao quanh nó. Tuy nhiên, nội dung trang web không phải luôn luôn có thứ tự thuận lợi như vậy.
Làm bài thực hành sau để hiểu rõ hơn về cách tạo hai cột bằng kĩ thuật float.
Lab2.5.c (exercise 15-3, p.354 [3])
2.5.3 Định vị phần tử
CSS cung cấp một số cách để định vị một phần tử trên trang web. Có thể định vị một phần tử theo kiểu thông thường, có thể định vị bằng vị trí cố định trên trang, hoặc cũng có thể định vị bằng vị trí cố định trên cửa sổ trình duyệt.
Các kiểu định vị
Để chọn kiểu định vị cho một phần tử, sử dụng thuộc tính position. Dưới đây là các đặc tính của position,
– Giá trị: static | relative | absolute | fixed | inherit
– Mặc định: static
– Áp dụng: mọi phần tử
– Kế thừa: không
Giá trị của thuộc tính position là các từ khóa, mỗi từ khóa ứng với một kiểu định vị, các phần sau sẽ tìm hiểu chi tiết về mỗi trường hợp, ở đây chỉ mô tả tóm tắt từng kiểu.
– static: đây là kiểu định vị thông thường, kiểu mặc định, trong đó, các phần tử sẽ được hiển thị theo đúng thứ tự của chúng trong mã nguồn. Từ static có nghĩa là tĩnh tại, nằm tại một vị trí, không di chuyển hay thay đổi vị trí.
– relative: phần tử được định vị dựa vào vị trí gốc (vị trí theo thứ tự trong mã nguồn) của nó. Vị trí gốc của phần tử trên giao diện sẽ vẫn được dành riêng cho nó, là một vùng không gian trống. Vị trí mới của phần tử được xác định dựa vào khoảng dời (offset distance) so với vị trí gốc. Từ relative có nghĩa là tương đối, nghĩa là vị trí mới sẽ là dịch chuyển một khoảng tương đối so với vị trí gốc.
– absolute: phần tử sẽ được tách khỏi luồng hiển thị thông thường, và vị mới của phần tử được xác định dựa theo cửa sổ trình duyệt hoặc phần tử chứa nó. Khác với kiểu relative, ở kiểu này, vùng không gian gốc của phần tử sẽ bị thu hồi, và nó thực sự không ảnh hưởng tới bố cục chung của các phần tử xung quanh.
– fixed: phần tử sẽ được tách khỏi luồng hiển thị thông thường, và vị trí mới của phần tử được xác định dựa theo cửa sổ trình duyệt chứ không dựa theo phần tử khác trong tài liệu. Khi người dùng cuộn nội dung tài liệu, thì phần tử định vị theo kiểu fixed vẫn nằm nguyên tại vị trí của nó trên cửa sổ trình duyệt.
Mỗi kiểu định vị có mục đích sử dụng riêng, tuy nhiên, kiểu absolute đa năng hơn cả. Với kiểu absolute, người thiết kế có thể đặt một đối tượng ở vị trí bất kì trong cửa sổ, hoặc trong một phần tử khác, có thể tạo bố cục nhiều cột, hoặc tạo các định dạng hiển thị đa dạng khác.
Cách xác định vị trí của phần tử
Sau khi đã chọn kiểu định vị, vị trí thực sự của phần tử được xác định dựa vào các thuộc tính sau,
top, right, bottom, left,
– Giá trị: đơn vị đo chiều dài | % | auto | inherit
– Mặc định: auto
– Áp dụng: các phần tử đã thiết lập kiểu hiển thị là relative, absolute và fixed
– Kế thừa: không
Các giá trị cung cấp cho mỗi thuộc tính (top, right, bottom, left) chính là khoảng dời (khoảng cách) so với các cạnh tương ứng. Ví dụ, giá trị của thuộc tính top chính là khoảng cách tính từ cạnh trên của cửa sổ trình duyệt (hoặc của một phần tử) tới cạnh trên của phần tử đang được thiết lập vị trí. Nếu top có giá trị dương, phần tử sẽ được dịch chuyển xuống phía dưới, ngược lại, nếu top có giá trị âm, phần tử sẽ được dịch chuyển lên phía trên. Tương tự, nếu left có giá trị dương, phần tử sẽ được dịch chuyển sang phía phải, nếu giá trị âm sẽ dịch sang phía trái.
Kiểu định vị relative
Như ở phần trên đã trình bày, kiểu định vị relative sẽ dịch chuyển phần tử một khoảng tương đối so với vị trí mặc định ban đầu của nó. Không gian ban đầu của phần tử vẫn được duy trì và tiếp tục ảnh hưởng tới bố cục của các nội dung xung quanh.
Quan sát ví dụ, thiết lập cho phần tử em kiểu định vị là relative, và giá trị top: 30px, left: 60px.
[HTML]
<p>Nhiệt độ trung bình tháng ở <em>Đà Lạt không bao giờ vượt quá 20°C</em>, ngay cả trong những tháng nóng nhất. Thành phố Đà Lạt là tỉnh lỵ của tỉnh Lâm Đồng, nằm trên cao nguyên Lâm Viên, thuộc vùng Tây Nguyên, Việt Nam. Từ xa xưa, vùng đất này vốn là địa bàn cư trú của những cư dân người Lạch, người Chil và người Srê thuộc dân tộc Cơ Ho. Cuối thế kỷ 19, khi tìm kiếm một địa điểm để xây dựng trạm nghỉ dưỡng dành cho người Pháp ở Đông Dương, Toàn quyền Paul Doumer đã quyết định chọn cao nguyên Lâm Viên theo đề nghị của bác sĩ Alexandre Yersin, người từng thám hiểm tới nơi đây vào năm 1893</p>
[CSS]
em {
position: relative;
top: 30px;
left: 60px;
background-color: #ff6347;
}
Xem hình minh họa,
Từ hình minh họa trên có thể thấy, phần không gian gốc của phần tử em trước khi nó được định vị theo kiểu relative vẫn được duy trì, các nội dung xung quanh vẫn được hiển thị như là đang có phần tử em tại đó. Do vậy, mặc dù đã được dịch chuyển tới vị trí mới, nhưng phần tử vẫn còn ảnh hưởng tới bố cục của các nội dung xung quanh. Ngoài ra, việc dịch chuyển phần tử tới vị trí mới có thể dẫn đến tình trạng phủ lấp các nội dung khác.
Với những hạn chế như vậy, nên kiểu định vị relative ít được sử dụng độc lập, mà nó thường được sử dụng làm “ngữ cảnh” cho kiểu định vị absolute.
Kiểu định vị absolute
So với kiểu định vị relative, kiểu absolute làm việc hơi khác một chút và linh hoạt hơn trong việc đặt một phần tử chính xác trên trang. Làm lại ví dụ giống như trong phần relative, chỉ thay đổi thuộc tính position thành absolute.
[CSS]
em {
position: absolute;
top: 30px;
left: 60px;
background-color: #ff6347;
}
Xem hình minh họa,
Quan sát trên hình minh họa sẽ thấy, không gian của phần tử em trước khi nó được thiết lập là absolute đã được thu hồi. Ở vị trí mới, phần tử em cũng phủ lấp các nội dung xung quanh. Có thể thấy, một phần tử được định vị theo kiểu absolute không làm ảnh hưởng đến bố cục của các phần tử xung quanh.
Tuy nhiên, điểm khác biệt quan trọng nhất chính là cách xác định vị trí mới của phần tử được định vị. Nó cũng dịch chuyển sang phải 60px, dịch chuyển xuống dưới 30px, nhưng lần này là lấy cạnh trái và cạnh trên của cửa sổ trình duyệt làm mốc.
Vậy có phải khi định vị theo kiểu absolute thì phần tử luôn lấy cửa sổ trình duyệt làm mốc không? Thực tế không phải vậy, mà nó sẽ lấy khối chứa (containing block) gần nhất làm mốc. Đừng nhầm khối chứa với phần tử kiểu block (block element), đây là hai khái niệm khác nhau. Khối chứa mặc định của một trang web chính là phần tử html, nó được gọi là khối chứa khởi tạo (initial containing block). Do vậy, phần tử em sẽ lấy khung chứa toàn bộ tài liệu (chính xác là vùng nội dung của cửa sổ trình duyệt) làm mốc.
Như vậy, trước khi thực hiện thiết lập vị trí theo kiểu absolute, cần tìm hiểu và xác định được khối chứa.
Khối chứa
Như ở phần trên đã đề cập tới thuật ngữ khối chứa, vậy khối chứa (containing block) là gì? Theo đặc tả của CSS, khối chứa chính là một phần tử được sử dụng để chứa phần tử khác, điều quan trọng là phần tử chứa phải “đã được thiết lập một trong các kiểu định vị: relative, absolute hoặc fixed”.
Khối chứa có thể là “cha”, “ông” hoặc tổ tiên (ancestor) của phần tử được chứa. Nếu một phần tử không có “cha”, “ông” hoặc tổ tiên của nó là khối chứa, thì nó sẽ nhận phần tử html làm khối chứa mặc định.
Xem lại ví dụ ở trên, khi thiết lập kiểu định vị cho phần tử em là absolute, mặc dù p chứa em, tuy nhiên do p chưa được thiết lập kiểu định vị nào (relative, absolute, fixed), nên p không phải là khối chứa của em. Cuối cùng, em phải nhận html làm khối chứa của nó.
Để hiểu rõ hơn, cùng làm một thử nghiệm sau, chuyển phần tử p trở thành khối chứa của em. Cách làm rất đơn giản, chỉ việc thiết lập thuộc tính position cho p, với giá trị hay được dùng là relative. Lưu ý: không cần dịch chuyển phần tử p tới vị trí khác, cứ để nó ở vị trí cũ.
p {
position: relative;
border: 1px solid red;
}
Kết quả là phần tử p trở thành khối chứa, và em sẽ lấy phần tử p làm chuẩn, để dịch chuyển tới vị trí mới.
Xem hình kết quả,
Để ý, sau khi một phần tử được thiết lập kiểu định vị, việc dịch chuyển vị trí được căn theo cạnh phía trong đường viền (border) của khối chứa và cạnh ngoài (outer edge) của phần tử. Quan sát ví dụ sau, thêm width: 200px, và margin: 25px cho em.
[CSS]
em {
width: 200px;
margin: 25px;
position: absolute;
top: 30px;
left: 60px;
background-color: #ff6347;
}
Xem hình minh họa,
Cũng giống như trong float, một phần tử inline khi được thiết lập kiểu định vị là absolute luôn được đối xử như một phần tử kiểu block. Như ở ví dụ trên, mặc dù phần tử em là kiểu inline, tuy nhiên, vẫn có thể thiết lập margin-top, margin-bottom và width (lưu ý: một phần tử inline sẽ không thiết lập được margin-top, margin-bottom và width) cho nó.
Khi một phần tử được thiết lập kiểu định vị, nó sẽ trở thành khối chứa, và tất cả các phần tử bên trong sẽ được thiết lập lại vị trí theo nó. Quan sát ví dụ dưới đây, khi div#content chưa được thiết lập kiểu định vị, phần tử li#special sẽ được căn theo toàn trang. Tuy nhiên, khi khi div#content được thiết lập position: relative thì li#special sẽ được căn theo div#content.
[HTML]
<div id="content">
<p>Nhiệt độ trung bình tháng ở <em>Đà Lạt không bao giờ vượt quá 20°C</em>, ngay cả trong những tháng nóng nhất. Thành phố Đà Lạt là tỉnh lỵ của tỉnh Lâm Đồng, nằm trên cao nguyên Lâm Viên, thuộc vùng Tây Nguyên, Việt Nam. Từ xa xưa, vùng đất này vốn là địa bàn cư trú của những cư dân người Lạch, người Chil và người Srê thuộc dân tộc Cơ Ho. Cuối thế kỷ 19, khi tìm kiếm một địa điểm để xây dựng trạm nghỉ dưỡng dành cho người Pháp ở Đông Dương, Toàn quyền Paul Doumer đã quyết định chọn cao nguyên Lâm Viên theo đề nghị của bác sĩ Alexandre Yersin, người từng thám hiểm tới nơi đây vào năm 1893</p>
<ul>
<li>A</li>
<li id="special">B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
[CSS]
div#content {
margin: 50px;
/*position: relative;*/
border: 1px solid red;
}
li#special {
position: absolute;
top: 20px;
left: 20px;
}
Xác định vị trí
Ở phần trên đã làm quen với việc dịch chuyển một phần tử sang trái và xuống dưới so với khối chứa. Phần này sẽ tìm hiểu thêm một số vấn đề liên quan đến việc xác định vị trí.
Nếu các giá trị của vị trí (top, right, bottom, left) là dương, phần tử sẽ được đẩy từ các cạnh về phía tâm của khối chứa. Nếu cạnh nào không được cung cấp giá trị, nó sẽ được thiết lập mặc định là auto và trình duyệt sẽ tự thêm các khoảng trắng để bố cục được hợp lý.
Quan sát ví dụ sau, với div#a là khối chứa; div#b là phần tử được định vị, thiết lập cả bốn giá trị để đặt div#b tại một ví trí xác định,
div#a {
position: relative; /* tạo khối chứa */
height: 120px;
width: 300px;
border: 1px solid;
background-color: #CCC;
}
div#b {
position: absolute;
top: 20px;
right: 30px;
bottom: 40px;
left: 50px;
border: 1px solid;
background-color: teal;
}
Lưu ý: việc thiết lập bốn giá trị cho vị trí của div#b đã gián tiếp xác định chiều rộng và chiều cao của nó, cụ thể là rộng 220px và cao 60px. Như vậy, nếu vừa định vị (cả bốn giá trị) vừa thiết lập chiều rộng và chiều cao cho div#b thì rất có thể sẽ xảy ra tình trạng xung đột, khi mà kích thước của phần tử cộng với giá trị vị trí (do định vị) sẽ vượt quá kích thước của khối chứa.
CSS cũng có phần đặc tả để giải quyết tình trạng xung đột này, tuy nhiên khá phức tạp. Vì vậy, tốt nhất là nên tính toán cẩn thận để tránh tình trạng xung đột xảy ra, và chỉ nên xác định chiều rộng của phần tử, cùng với một hoặc hai giá trị về vị trí, còn lại nên để cho trình duyệt tự căn chỉnh.
Để xác định vị trí, ngoài đơn vị đo là px, cũng có thể sử dụng đơn vị là %. Ví dụ, đoạn mã đầu tiên dưới đây sẽ đặt hình ảnh ở vị trí sát cạnh trái và ở khoảng giữa theo chiều dọc; đoạn mã thứ hai sẽ đặt hình ảnh ở góc dưới bên phải của khối chứa.
img#A {
position: absolute;
top: 50%;
left: 0%; /* với giá trị 0 có thể không cần kí hiệu % */
}
img#B {
position: absolute;
bottom: 0%; /* với giá trị 0 có thể không cần kí hiệu % */
right: 0%; /* với giá trị 0 có thể không cần kí hiệu % */
}
Lab2.5.d (exercise 15-4, p.365 [3])
Thuộc tính z-index
Như đã biết, sau khi thiết lập kiểu định vị, có thể đặt phần tử ở vị trí bất kì trong trang web. Điều này dẫn tới khả năng có nhiều phần tử chồng lấn lên nhau.
Mặc định, phần tử nào nằm trước trong mã nguồn sẽ nằm dưới, phần tử nào nằm sau trong mã nguồn sẽ nằm trên. Tuy nhiên, CSS cho phép thiết lập thứ tự xuất hiện của các phần tử khi chồng lấn bằng thuộc tính z-index.
Dưới đây là các đặc tính của z-index,
– Giá trị: number | auto | inherit
– Mặc định: auto
– Áp dụng: các phần tử đã thiết lập kiểu hiển thị là relative, absolute và fixed
– Kế thừa: không
Để dễ hiểu về z-index, hãy tưởng tượng giao diện trang web là một mặt phẳng, với hai trục tọa độ là Ox, và Oy để xác định chiều rộng và chiều cao tương ứng. Để xác định chiều sâu của một phần tử thì sẽ sử dụng thêm trục tọa độ Oz, trục này có chiều dương hướng từ sau màn hình ra trước màn hình. Như vậy, đối tượng nào có giá trị theo trục Oz càng lớn thì càng gần mắt người dùng và tất nhiên sẽ nằm trên, ngược lại giá trị nhỏ hơn hoặc âm thì sẽ nằm càng xa mắt người dùng (nên sẽ nằm dưới). Vậy, z-index chính là thứ tự theo trục Oz.
Ví dụ sau gồm ba phần tử chứa hình ảnh của ba chữ là A, B và C. Mặc định, sau khi thiết lập kiểu định vị và vị trí, thì chữ A sẽ nằm dưới cùng, đến chữ B, và chữ C nằm trên cùng. Tuy nhiên, với việc thiết lập giá trị z-index thì thứ tự hiển thị của các chữ bị đảo ngược.
[HTML]
<p id="A"><img src="A.gif" alt="A" /></p>
<p id="B"><img src="B.gif" alt="B" /></p>
<p id="C"><img src="C.gif" alt="C" /></p>
[CSS]
#A {
z-index: 10;
position: absolute;
top: 200px;
left: 200px;
}
#B {
z-index: 5;
position: absolute;
top: 225px;
left: 175px;
}
#C {
z-index: 1;
position: absolute;
top: 250px;
left: 225px;
}
Xem hình minh họa,
Kiểu định vị fixed
Ở các phần trên đã tìm hiểu hai kiểu định vị là relative và absolute, phần này sẽ tìm hiểu kiểu định vị còn lại là fixed.
Cách làm việc của kiểu định vị fixed tương tự với kiểu định vị absolute, chỉ khác một điểm là nó luôn lấy màn hình (viewport) làm khối chứa, nghĩa là vị trí hiểu thị của phần tử sẽ lấy màn hình làm chuẩn.
Với kiểu định vị absolute, khi người dùng cuộn nội dung thì phần tử đã được định vị sẽ bị cuộn theo. Tuy nhiên, với kiểu định vị fixed thì phần tử vẫn nằm tại một vị trí cố định trên màn hình khi người dùng cuộn nội dung.
Kiểu định vị fixed thường được sử dụng để cố định thanh trình đơn (thanh điều hướng) tại một vị trí cố định trên màn hình của người dùng, nó không bị thay đổi vị trí khi người dùng cuộn phần nội dung.
Ví dụ, tại bài Lab2.5.d, sửa kiểu định vị của #award thành fixed và quan sát màn hình kết quả, hình ảnh giải thưởng sẽ luôn nằm tại một vị trí cố định khi người dùng cuộn nội dung xuống dưới.
#award {
position: fixed;
top: 35px;
left: 25px;
}
.jpg)
.jpg)
){kind=link}
0 Nhận xét