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

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 mi

Trang 1

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

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

Trang 2

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

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 ạ:

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ó

Đ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 …

Ở 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

Trang 3

Nh ững bài viết có liên quan

Contextual Position

Display Property

Absolute Position trong thiết kế giao diện

Class và ID

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

Trang 4

7 Comments ( Comment bài này )

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:

Thx em! đã fix.

Reply

Phùng Anh Tú says:

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

Trang 5

Leave a comment ( Chọn hình đại diện )

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ư:, , <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

Trang 6

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.

Định dạng
Số trang	6
Dung lượng	292,59 KB