DHTML CSS Positioning (CSS-P)

CSS được sử dụng để thêm phong cách cho các phần tử HTML.

Ví dụ

Ghi chú：Hầu hết các ví dụ DHTML cần IE 4.0+, Netscape 7+ hoặc Opera 7+!

position:relative
Cách định vị phần tử này tương đối với vị trí bình thường của phần tử.
position:relative
Cách định vị tất cả các tiêu đề tương đối với vị trí bình thường.
position:absolute
Cách sử dụng giá trị tuyệt đối để định nghĩa một phần tử.

Bạn có thể tìm thấy nhiều ví dụ hơn ở cuối trang.

Những thuộc tính nào có thể được sử dụng cùng với CSS-P?

Trước hết, phần tử này phải chỉ định thuộc tính position (relative hoặc absolute).

Sau đó, tôi có thể thiết lập các thuộc tính CSS-P sau:

  • left - Vị trí bên trái của phần tử
  • top - Vị trí đỉnh của phần tử
  • visibility - Đặt phần tử nên nhìn thấy hay ẩn
  • z-index - Thứ tự chồng lên của phần tử
  • clip - Cắt phần tử
  • overflow - Cách xử lý nội dung chảy ra

Position

Thuộc tính position của CSS cho phép bạn kiểm soát vị trí của một phần tử trong tài liệu.

position:relative

Thuộc tính position:relative có thể định vị phần tử dựa trên vị trí hiện tại của phần tử.

Ví dụ dưới đây đặt phần tử div này vào vị trí cách bên phải của vị trí bình thường 10 pixel:

div
{
position:relative;
left:10;
}

position:absolute

Thuộc tính position:absolute định vị một phần tử dựa trên mép margin của cửa sổ.

Ví dụ dưới đây đặt phần tử div này vào vị trí cách cạnh phải của mép margin của khối bao gồm 10 pixel:

div
{
position:absolute;
left:10;
}

Visibility

Thuộc tính visibility quyết định phần tử có nên nhìn thấy hay không.

visibility:visible

Thuộc tính visibility: visible cho phép phần tử nhìn thấy.

h1
{
visibility:visible;
}

visibility:hidden

Thuộc tính visibility: hidden cho phép phần tử không nhìn thấy.

h1
{
visibility:hidden;
}

Z-index

Thuộc tính z-index được sử dụng để đặt một phần tử sau một phần tử khác. Giá trị mặc định của z-index là 0. Giá trị càng cao, quyền ưu tiên càng cao. Giá trị z-index: -1 có quyền ưu tiên thấp hơn.

h1
{
z-index:1;
}
h2
{
z-index:2;
}

Trong ví dụ trên, nếu h1 và h2 chồng lên nhau, thì phần tử h2 sẽ nằm trên phần tử h1.

Filters

Thuộc tính filter cho phép bạn thêm nhiều hiệu ứng trang trí hơn cho văn bản và hình ảnh.

h1
{
width:100%;
filter:glow;
}

Ghi chú：Nếu cần sử dụng thuộc tính filter, hãy luôn chỉ định chiều rộng của phần tử.

ví dụ trên tạo ra đầu ra sau đây：

Tiêu đề

các bộ lọc khác nhau

Ghi chú：trừ khi thuộc tính background-color được thiết lập thành transparent, một số thuộc tính Filter sẽ không hoạt động!

thuộc tính tham số mô tả ví dụ
alpha
  • opacity
  • finishopacity
  • style
  • startx
  • starty
  • finishx
  • finishy
 cho phép bạn thiết lập độ trong suốt của phần tử 
filter:alpha(
opacity=20,
finishopacity=100,
style=1,
startx=0, 
starty=0,
finishx=140,
finishy=270)
blur
  • add
  • direction
  • strength
 làm phần tử mờ 
filter:blur(
add=true,
direction=90,
strength=6);
chroma color làm màu cụ thể trong suốt 
filter:chroma(
color=#ff0000)
fliph none đảo ngược phần tử theo hướng ngang filter:fliph;
flipv none đảo ngược phần tử theo hướng dọc filter:flipv;
glow
  • color
  • strength
 làm phần tử phát sáng 
filter:glow(
color=#ff0000,
strength=5);
gray none hiển thị phần tử bằng màu đen và trắng filter:gray;
invert none hiển thị phần tử bằng cách sử dụng màu và độ sáng đảo ngược filter:invert;
mask color hiển thị phần tử có nền màu nền và nền trong suốt 
filter:mask(
color=#ff0000);
shadow
  • color
  • direction
 hiển thị phần tử có bóng mờ 
filter:shadow
(color=#ff0000,
direction=90);
dropshadow
  • color
  • offx
  • offy
  • positive
 hiển thị phần tử có bóng mờ 
filter:dropshadow
(color=#ff0000,
offx=5,
offy=5,
positive=true);
wave
  • add
  • freq
  • lightstrength
  • phase
  • strength
 hiển thị phần tử dưới dạng sóng 
filter:wave(
add=true,
freq=1,
lightstrength=3,
phase=0,
strength=5)
xray none Hiển thị các phần tử với màu đen và trắng, có giá trị màu và độ sáng. filter:xray;

Background

Thuộc tính background cho phép bạn chọn hình nền của riêng bạn.

background-attachment:scroll

Hình nền sẽ cuộn theo trang.

background-attachment:fixed

Hình nền sẽ không cuộn theo trang.

Các ví dụ khác

Visibility
Làm thế nào để làm cho một phần tử không nhìn thấy được. Bạn muốn phần tử này hiển thị hay không hiển thị?
Z-index
Z-index có thể được sử dụng để đặt một phần tử sau một phần tử khác, thông qua thứ tự Z-index.
Z-index
Hãy nhìn xem, thứ tự Z-index của phần tử đã thay đổi.
Cursors
Thay đổi phong cách con trỏ chuột bằng CSS.
Filters
Sử dụng thuộc tính filter để thay đổi phong cách tiêu đề.
Filters trên hình ảnh
Thuộc tính filter cũng có thể được áp dụng cho hình ảnh, dưới đây là một số ví dụ về hình ảnh đã áp dụng thuộc tính filter.
Watermark
Hình nền sẽ không di chuyển khi trang cuộn.