position property _ học thiết kế web theo chuẩn.

Position Property | Học thiết kế web theo chuẩn.
3:02:41 PM]
NAVIGATION
Cách chọn domain
Lập trình web và sự Lười nhác
Thứ bậc trong XHTML
Tách hình sử dụng Extract Filter (video)
Điểm mạnh và yếu của Video Tutorial
CSS3 – Animation
Thận trọng khi dùng hình minh họa
Cách viết bài hiệu quả trên web
Làm gì để được Bookmark
Tạo điểm khác biệt
PHP CO BẢN – NÂNG CAO
tìm hiểu cú pháp và phương thức PHP
Phép toán và phát biểu có điều kiện trong php
$_POST và $_GET
Làm quen đối tượng Session
Khai báo hàm, chèn tập tin và tập tin dùng chun
Cách xử lý chuỗi, mảng, kiểu DataTime
Thao tác trên cơ sở dữ liệu MySQL
PHP và Database
Phân trang với PHP
Xóa, Cập nhật dữ liệu dạng mảng
Tạo Mailing List: PHP & Mysql
RECENT COMMENTS
Random News Popular
EMAIL ARTICLES
Position Property
October 9, 2008 7 comments
Khi đã sử dụng CSS để thiết kế giao diện thì Position Property là một

trong những phần quan trọng nhất mà bạn cần hiểu rõ. Position
Property chi phối mối tương quan giữa các thành phần của trang web. Có tất cả 4 giá trị cho
Position property là: Static, Absolute, Fixed và Relative. Trong đó Static là giá trị mặc định khi
không có giá trị nào được gán. Trong ví dụ dưới đây bạn sẽ thấy có 4 đoạn văn ngắn. Đoạn
văn thứ 1, 2 và 4 tôi để giá trị mặc định là Static và đoạn văn thứ 3 được gán id để chúng ta
có thể thay đổi nó mà không ảnh hưởng đến các đoạn khác.
Static Position
Trước hết là chế độ Static mặc định khi không có giá trị nào được gán, bạn sẽ thấy 4 đoạn
văn xếp chồng lên nhau
CSS
CSS Cơ bản
jQuery
jQuery Cơ bản
Phát triển Web
Bài viết, kinh nghiệm
Videos
Các thể loại
WordPress
Tutorials, Hacks
HOME CÂU HỎI THƯỜNG GẶP LIÊN HỆ TÁC GIẢ BẢN QUYỀN
Position Property | Học thiết kế web theo chuẩn.
3:02:41 PM]
QUẢNG CÁO
Your Ad Here for Free
$20 in Free Clicks to place your ad
here. Join Free now!
www.your-site.com
Your Ad Here for Free
$20 in Free Clicks to place your ad
here. Join Free now!

www.your-site.com
Your Ad Here for Free
$20 in Free Clicks to place your ad
here. Join Free now!
www.your-site.com
Tạo WordPress Theme – Dựng xHTML (16)
chicken_roll: hahaha hay quá hết chổ trê (thanks you
very much much…) nghe anh nói đây ko
Tạo WordPress Theme – Slice hình (22)
chicken_roll: ui ui hay quá cảm ỏn nhiều học rất nhiều
từ anh và Anh CS thanks phát cho có
Tạo WordPress Theme – Search form và Random
Posts (15)
DiVIVu: @ajimoto & tuyen: Làm thế này là được bạn ạ:
<script type="text/javascript&
PHP Căn Bản – Bài 9 (40)
pham duy: Vang ban angelthao_0984884679 da noi
dung do chung t con chan chu gi nua ma khong giup
doan: ai muốn xem bằng file swf thì down KMP về mà
dùng cái này còn hay hơn media của win nhiều
Lập trình web và sự Lười nhác (23)
kien: Không còn gì để nói :-s
Tạo trang web đầu tiên (41)
ho nga: ?
ho nga: huhu sao làm web mệt dzữ vậy a hai ui…?
Với giá trị Static (giá trị mặc định) các thành phần chỉ đơn thuần được sắp xếp theo thứ tự
xuất hiện và được phân cách bởi các giá trị margin mặc định. Để thay đổi cách sắp xếp này,
bạn cần sử dụng một trong những cách sau đây.
Relative Position
Bây giờ chúng ta sẽ thử di chuyển đoạn văn thứ 2 bằng cách gán cho nó giá trị là relative. Ở

mỗi giá trị này sẽ có 4 tuỳ biến lần lượt là top, right, bottom và left cho bạn sử dụng. Tuy
nhiên trong hầu hết các trường hợp, bạn chỉ cần sử dụng hai giá trị là top và left là đủ đạt
được mục đích.
p#second {position: relative; top: 10px;left: 20px;
border: 1px solid #a4a4a4;background: #faf3c7;}
Ở code HTML bạn phải có
<p>Đoạn văn bản thứ nhất …</p>
<p id="second">Đoạn văn bản thứ 2 …</p>
<p>Đoạn văn bản thứ 3 </p>
<p>Đoạn văn bản thứ 4 …</p>
Ở trình duyệt bạn sẽ thấy đoạn văn bản thứ 2 bị dịch chuyển xuống dưới 10px và lệch sang
phải 20px. Như đã nói ở trên các thành phần có mối liên quan đến nhau, do vậy khi bạn đặt
giá trị {top: 10px; left: 20px;} thì đoạn văn này sẽ bị di chuyển tương ứng với đoạn
văn nằm trên nó. Cụ thể cạnh trên của nó cách cạnh đáy của đoạn thứ 1 là 30px.
Ở trong trường hợp Relative này, khi đoạn văn bị di chuyển nó cũng để lại một khoảng trống
bằng với kích thước cũ của nó và dù nó di chuyển sang vị trí mới. Khoảng không nó chiếm
vẫn không bị mất đi. Cho nên nếu bạn sử dụng phương pháp này vào giao diện, bạn cũng
cần di chuyển đoạn văn thứ 4 sao cho nó không bị đè lên nhau.
Absolute Position
Position Property | Học thiết kế web theo chuẩn.
3:02:41 PM]
Những bài viết có liên quan
Contextual Position
Contextual Position
Display Property
Absolute Position trong thiết kế giao diện
Class và ID
Your Ad Here for Free
$20 in Free Clicks to place your ad
here. Join Free now!

www.your-site.com
Your Ad Here!
BIDVERTISER ADS
Trong phần này ta sẽ thử với giá trị là absolute
Bạn sẽ thấy đoạn văn thứ2 bị di chuyển lên trên và cách biên trình duyệt là 10px và 20px
tương ứng với trên và trái. Bởi vì khi định vị với giá trị là absolute cho một thành phần nào
đó, nó sẽ bị tách ra khỏi vị trí thông thường của nó. Khoảng không cũ nó bỏ lại đã bị đoạn
văn thứ 3 di chuyển lên lấp lại. Đoạn văn thứ 2 này trở nên hoàn toàn độc lập với các thành
phần xung quanh.
Fixed Position
Fixed Position cho hiệu ứng giống y như absolute chỉ có điều khi bạn kéo thanh cuộn
dọc, đoạn văn thứ 3 sẽ giữ nguyên vị trí và không bị cuốn theo trình duyệt. Đặc tính này hiện
nay ít được sử dụng hơn. Nhưng nếu bạn muốn một thành phần nào đó như là nút bấm
hoặc hình quảng cáo luôn kè kè theo sát người đọc mỗi khi họ kéo thanh cuộn dọc, thì bạn
có thể sử dụng tính năng này.
Position Property | Học thiết kế web theo chuẩn.
3:02:41 PM]
7 Comments
( Comment bài này )
« Thứ bậc trong XHTML Clear và Float »
alex says:
September 9, 2009 at 5:03 pm
Đoạn văn bản thứ nhất …
Đoạn văn bản thứ 2 …
Đoạn văn bản thứ 3
Đoạn văn bản thứ 4 …
đoạn này,a viết sai thì phải ^^!nếu thế đoạn 3 di chuyển chứ
!
Reply
Demon Warlock says:

September 9, 2009 at 6:50 pm
Ý, đúng rồi ha! cám ơn em nhé! chắc tại nhiều “đoạn văn bản” quá
Đã sửa!
Reply
sailormoon0459 says:
December 13, 2009 at 7:01 am
Còn chữ Reltaive ở phần mở đầu nữa anh !
Reply
Demon Warlock says:
December 13, 2009 at 8:19 am
Thx em! đã fix.
Reply
Phùng Anh Tú says:
December 25, 2009 at 12:30 am
Bài viết của anh lúc nào cũng hay! Cám ơn anh.
Reply
nguyenvanchuong says:
January 1, 2010 at 10:56 pm
nhung bai hoc that don gian nhung vo cung hieu qua cam o anh rat nhieu
Reply
arjmoto says:
Reply
Position Property | Học thiết kế web theo chuẩn.
3:02:41 PM]
Leave a comment
( Chọn hình đại diện )
Chọn kiểu gõ: Tự động TELEX VNI Tắt
June 8, 2010 at 10:03 pm
Không biết dùng nhiều position có coi bị là lạm dụng không anh nhỉ.Em xem xong bài
này và video về Display Property.? em thử làm css và thấy nội dung và hình không

theo ý, thế là em lại áp dụng thẻ position vào. kể cả đối với những thành phần inline
em cũng dùng và hầu như em hay dùng position.Nếu không dùng position thì em phải
làm nhiều thẻ div.Có lẽ em mới làm CSS nên còn bỡ ngỡ ! anh có lời khuyên cho em
vể dùng position nhé ! em cũng sẽ nghiền lại những video của anh về CSS để có thể
làm tốt hơn.
Tên bạn
Email
Website
Comment
Luu ý khi post comment:
Không "bóc tem" topic
Dùng lời lẽ có văn hoá và lịch sự
Xem trang FAQs trước khi hỏi
Bạn có thể dùng thẻ HTML như:<strong>, <em>, <a>
Wrap code trong dấu `backtick` (dấu trên phím Tab)
Izwebz is solemnly hand coded and designed
from scratch by Demon Warlock. It is also very
Rules are not made to be broken at Izwebz
Bạn không được tự ý copy và phát hành
Câu hỏi thường gặp
Liên hệ
Trang web vẫn đang trong quá trình phát triển
về nội dung. Do vậy nếu bạn có khả năng hãy
Submit
Position Property | Học thiết kế web theo chuẩn.
3:02:41 PM]
© 2008-2010 izwebz, All Rights Reserved. BACK TO TOP Powered by WordPress | Hand coded and designed by Demon Warlock
proud of being powered by WordPress, which
is an exceptionally well written and beautiful
CMS

lại nội dung của izwebz nếu chưa được sự
đồng ý của tôi.
Biết tôn trọng và cư xử hòa nhã với mọi
người
Không "bóc tem" bài viết.
Izwebz được quyền xóa những comment
nào không phù hợp với nội dung của trang
web
Tác giả
Bản quyền
đóng góp bài viết hoặc bạn có thể quảng cáo
trang web đến những người mà bạn biết.
Được vậy tôi sẽ rất biết ơn bạn.