Trang chủTrang chủ Liên hệLiên hệ
PHP BASIC

» Events  » References  » Tutorials  » Hướng dẫn  RSS Feed2.0 Đăng ký | Đăng nhập

Dịch PHP Manual (đã dịch 113 /1248)
Thêm bài viết mới
#Thêm ý kiến
Emotion|Show / Hide
Z-Index định thuộc tính chiều sâu( giá trị trên trục z của hệ tọa độ xyz) của đối tượng
z-index: value;
với value là  một số nguyên ..-2,-1,0,1,2..

giống như 2 quyển sách chồng lên nhau, nếu quyển nào có z-index lớn thì nằm trên và  ngược lại (thường dùng trong thiết kế bằng div,layer)

Ví dụ:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 252px;
top: 225px;
background: #ccc;
}
#Layer2 {
position:absolute;
width:200px;
height:150px;
z-index:2;
left: 352px;
top: 225px;
background: red;
}
-->
</style>
</head>

<body>
<div id="Layer1">Layer 1</div>
<div id="Layer2">Layer 2</div>
</body>
</html>

kết quả
http://phpbasic.com/phpbasic_data/include/css/zindex1.gif

nếu đổi giá trị z-index của 2 layer trên cho nhau ta đựoc kết quả ngược lại:
http://phpbasic.com/phpbasic_data/include/css/zindex2.gif

theo kinh nghiệm TG có 2 điều cần lưu ý:
- nếu 2 layer có z-index bằng nhau thì cái nào được đặt nằm sau trong html sẽ nằm trên cái trước
ví dụ: giả sử Layer1, Layer2 có cùng z-index thì:
<div id="Layer1"></div>
<div id="Layer2"></div>
Layer 2 sẽ nằm trên Layer 1 và ngược lại
- khi đặt position: absolute; thì z-index mặc định sẽ là 1

Tác giả:TG
Webmaster
http://phpbasic.com

Show / Hide
#Thêm ý kiến

Add phpBasic to your browser's search box
Digg.com delicious Furl Google Bookmark Reddit Slashdot Yahoo My Web

Web design

Tableless template Framework PHP functions
jQuery
Các bài viết đã xem • Quản lý banner quảng cáo cho nhiều website • Window Popup • Menu CSS 4 • Lấy tọa độ của con trỏ(mouse) • Hỏi TG và mọi người vấn đề liên quan đến url


XHTML Standard
Xây dựng & phát triển bởi tất cả các thành viên.
Powered by http://phpbasic.com