Simple CSS Bài 12: Vị trí & Lớp

Dựa trên bài của Pearl trên phpcodevn

12.1. Nguyên lý hoạt động của vị trí – position
Hãy  tưởng  tượng  cửa  sổ  trình  duyệt  của  bạn  giống  như một  hệ  tọa  độ  và  với position bạn có thể đặt một đối tượng web ở bất cứ vị trí nào trên hệ tọa độ này.

Giả sử chúng ta muốn định vị một ảnh ở vị trí 70px cách đỉnh và 90px từ bên trái tài liệu, chúng ta sẽ viết CSS như sau:

view source

print?

1

img {

2	position:absolute;

3

top:70px;

4

left:90px

5

}

Như bạn đã thấy, sự định vị bằng CSS là một công nghệ chính xác để định vị một thành phần. Nó dễ dàng hơn so với việc dùng bảng, ảnh trong suốt hay bất kỳ thứ gì khác.
12.2.  Vị trí tuyệt đối – Absolute position
Định vị tuyệt đối là sự định vị mà trong đó các thành phần được định vị không để lại bất cứ một khoảng trống nào trong tài liệu.
Một thành phần được định vị tuyệt đối sẽ nhận giá trị position là absolute. Các đối tượng đã định vị tuyệt đối sẽ dùng kết hợp với các thuộc tính top, left, right, bottom để xác định tọa độ.
Ví dụ  sau  sẽ  chỉ  cho  chúng  ta cách đặt bốn  ảnh ở bốn góc  tài  liệu bằng định vị tuyệt đối. Ví dụ 12.2

view source

print?

01

#logo1 {

02	position:absolute;

03

top:50px;

04

left:70px

05	width:100px;

06	height:100px;

07	background:black;

08

}

09

#logo2 {

10	position:absolute;

11

top:0;

12

right:0;

13	width:100px;

14	height:100px;

15	background:green;

16

}

17

#logo3 {

18	position:absolute;

19

bottom:0;

20

left:0;

21	width:100px;

22	height:100px;

23	background:blue;

24

}

25

#logo4 {

26	position:absolute;

27	bottom:70px;

28	right:50px;

29	width:100px;

30	height:100px;

31	background:red;

32

}

12.3. Vị trí tương đối – Relative position
Sự định vị tương đối cho một thành phần là sự định vị được tính từ vị trí gốc trong tài liệu. Các thành phần đã được định vị tương đối sẽ để lại khoảng không trong tài liệu. Các thành phần được định vị tương đối sẽ nhận giá trị position là relative.
Chúng  ta hãy  làm  lại ví dụ  trên nhưng  thay absolute  thành  relative. Các bạn ghi nhận  lại  vị  trí  4  ảnh  logo  lúc  áp  dụng  thuộc  tính  position  là  none,  absolute  và relative rồi rút ra nhận xét.
Hai thuộc  tính position và float mang  lại cho trang web của bạn sự cơ động hơn các phương pháp dùng bảng hay ảnh  trong
suốt.
12.4. Lớp/Chiều sâu – Z-Index

CSS hoạt động trên cả 3 chiều: cao, rộng, sâu. Chiều sâu được định nghĩa với thuộc tính z-index, thuộc tính này giúp bạn đặt một thành phần này lên trên một thành phần khác. Với mục đích này, bạn sẽ gán cho mỗi phần tử một con số. Theo đó, phần tử có số cao hơn sẽ nằm trên, phần tử có số thấp hơn sẽ nằm dưới.
Ví dụ sau chúng ta sẽ đặt 5 bức ảnh logo ở 5 lớp. Ví dụ 12.4

view source

print?

01

#logo1 {

02	position:absolute;

03

top:70px;

04	left:50px;

05	width:100px;

06	height:100px;

07	background:black;

08

z-index:1

09

}

10

11

#logo2 {

12	position:absolute;

13	top:140px;

14	left:100px;

15	width:100px;

16	height:100px;

17	background:yellow;

18

z-index:2

19

}

20

21

#logo3 {

22	position:absolute;

23	top:210px;

24	left:150px;

25	width:100px;

26	height:100px;

27	background:green;

28

z-index:3

29

}

30

31

#logo4 {

32	position:absolute;

33	top:280px;

34	left:200px;

35	width:100px;

36	height:100px;

37	background:orange;

38

z-index:4

39

}

40

41

#logo5 {

42	position:absolute;

43	top:350px;

44	left:250px;

45	width:100px;

46	height:100px;

47	background:red;

48

z-index:5

49

}

Bài viết của link2caro - Cộng Đồng WordPress Việt Nam
Hãy tôn trọng tác giả và ghi rõ nguồn khi sao chép, sử dụng nội dung bài viết này.