absolute position trong thiết kế giao diện _ học thiết kế web theo chuẩn.

Absolute Position trong thiết kế giao diện | Học thiết kế web theo chuẩn.
3:04:32 PM]
NAVIGATION
PHP Căn Bản – Bài 6 – Phần 1
Phần 1: Chuyển PSD thành xHTML
Tạo WordPress Theme – Search form và Random
Posts
Một trang web một chủ đề
Tình hình chung của những trang web Việt
Tôi nên làm trang web về chủ đề gì?
Không nên dùng WYSIWYG Editor
10 lý do bạn nên sử dụng WordPress
Top 10 trình soạn thảo code
Xuất bản SWF Player V1.1
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
Absolute Position trong thiết kế
giao diện

November 16, 2009 41 comments
Có một thực tế rằng Absolute Position tuy rất hay và mạnh nhưng lại
chưa được sử dụng đúng với “thực lực” của nó. Đa phần người ta thường sử dụng Float và
dùng Padding hoặc Margin để căn chỉnh các thành phần trong giao diện với nhau. Nhưng
như bạn cũng đã biết, giao diện với Float rất mong manh. Chỉ cần sai chút xíu là cả giao diện
có thể bị vỡ.
Đó là chưa kể đến những bất cập của Float như phải clear float và đôi khi nó thực sự rất khó
quản lý. Nhưng không hiểu vì lý do tại sao Float được sử dụng rất rộng rãi và vượt ra ngoài
dự định ban đầu của những người phát triển CSS. Đầu tiên Float chỉ được thiết kế để đưa
hình ảnh vào những vị trí thích hợp. Nhưng dần dà nó được sử dụng khá phổ biến trong
thiết kế giao diện.
Nói vậy không phải là tôi không thích Float hoặc sử dụng Float là không tốt, mà sự thực thì
tôi cũng sử dụng Float khá nhiều trong thiết kế giao diện. Nhưng nếu dùng nó kết hợp với
Absolute Position trong CSS thì giúp giao diện của bạn có thể tương thích với nhiều trình
duyệt mà không cần phải áp dụng hack cho IE.
Trong bài này chúng ta sẽ tìm hiểu sơ qua về Absolute Position trong Relative Position. Tôi
đã có một video về Contextual Positioning nói rất rõ về mối liên hệ giữa Relative Position và
Absolute Position. Nhưng vì đây là khái niệm hết sức quan trọng do vậy trong bài này tôi
cũng nói lại một chút.
Ở ví dụ dưới đây tôi sử dùng Absolute Position để định vị 3 thẻ div nằm trong thẻ div lớn là
#wrapper.
Với Absolute Position bạn có thể sử dụng các giá trị:
px, em và %
và với các vị trí:
top,
1 <div id="wrapper">
2 <div id="left">&nbsp;</div>
3
4 <div id="middle">&nbsp;</div>
5

6 <div id="right">&nbsp;</div>
7 </div>
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
Absolute Position trong thiết kế giao diện | Học thiết kế web theo chuẩn.
3:04:32 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…?
right, bottom và left. Tuy nhiên trong thực tế bạn chỉ cần 2 giá trị là top và left (hoặc
right) thì cũng đủ để định vị một thành phần rồi.
Mẹo nhỏ: Nếu trong quá trình định vị tọa độ với Absolute bạn phải làm đi làm lại nhiều lần.
Thì nay bạn có thể sử dụng addon Firebug để định vị chính xác đến từng Pixel. Tôi có làm
một video hướng dẫn cách sử dụng Firebug.
Ở ví dụ trên thẻ div#wrapper có position: relative, nó sẽ đóng vai trò làm thành
phần bao quanh cho 3 thẻ div có position: absolute nằm bên trong nó. Nếu ta bỏ giá trị
position: relative ở thẻ div#wrapper đi thì 3 thẻ div ở trong sẽ như “hươu lạc mẹ”
và chạy toán loạn hết. Uhm! thực ra cũng không toán loạn mà nó sẽ nhận body làm mẹ nuôi
và định vị theo “bà mẹ” mới này.
Absolute Position trong thiết kế giao diện | Học thiết kế web theo chuẩn.
3:04:32 PM]

Những bài viết có liên quan
Thiết kế giao diện với Photoshop (phần 1/4)
Contextual Position
Position Property
Giao diện với CSS – Phần 1
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
Chính vì thế điều quan trọng nhất trong khi sử dụng Absolute Position là xác định thành phần
bao quanh và đặt position của nó thành relative
Nghe cũng hay mà bạn có ví dụ trong thực tế
không?
Tôi biết là bạn sẽ hỏi do vậy tôi đã chuẩn bị trước một giao diện được sử dụng Absolute
Position cho bạn tham khảo. Bạn sẽ dễ dàng nhận thấy ở giao diện này có một tấm hình lớn
choán hết phần Header và nó nằm “chông chênh” ở giữa. Đây là ví dụ hoàn hảo về sử dụng
Absolute Position để định vị các thành phần.
Ngoài ra các thành phần còn lại như thanh di chuyển ở trên và dưới, logo và phần Featured
đều được sử dụng Absolute Position. Tôi đã thử trong IE 6, 7 và 8 và hầu như không phải
hack bất cứ phần nào ngoại trừ phần PNG hack cho IE 6. Nếu giao diện này làm bằng Float
thì sẽ ít nhất là cũng phải hack cái Double Margin của IE.
Bạn có thể download ví dụ này về để xem phần code HTML và CSS


Compatible Implant
Trilobe Compatible Implant The $145.00 Alternative
www.BlueSkyBio.com
Absolute Position trong thiết kế giao diện | Học thiết kế web theo chuẩn.

3:04:32 PM]
41 Comments
( Comment bài này )
« Cài đặt Localhost – WAMP Cách sử dụng Sprite Image »
Giao diện mới cho Izwebz
princeprog says:
November 16, 2009 at 5:15 pm
Dùng Absolute Position trong thiết kế giao diện rất hay, nhưng khó xác định các tọa độ
cho đúng vị trí, phải thử nhiều lần mới Siết. Nếu em dùng thì khi Absolute poítion
thành phần trong div này sẽ lấy vị trí theo div#sidebar hay div#wrapper ạ?
Reply
Demon Warlock says:
November 16, 2009 at 5:37 pm
Nếu theo ví dụ trên sẽ là theo div#wrapper.
Việc xác định tọa độ không có gì khó nếu sử dụng addon Firebug. Ban đầu chỉ cần
cho tọa độ bất kỳ sau đó cho hiển thị lên firebug và chỉnh sửa. Em có thể xem thêm
video về firebug để biết thêm chi tiết.
Reply
xuantruong89 says:
November 16, 2009 at 7:00 pm
link ví dụ lỗi rồi anh ơi, up lại đi
Reply
Demon Warlock says:
November 16, 2009 at 8:15 pm
Đã sửa! cảm ơn em.
Reply
Trung says:
November 17, 2009 at 7:23 am
anh ơi, nhiều tài liệu nói đến việc sử dụng kéo thả trong dreamweaver . em thấy code
toàn table là table. cách đấy công nhận là rất nhanh so với sử dụng css. em muốn

hỏi là sau này để đi làm thì người ta hay dùng cách nào hả anh :-s . giờ em băn
khoăn quá.
Reply
Absolute Position trong thiết kế giao diện | Học thiết kế web theo chuẩn.
3:04:32 PM]
Demon Warlock says:
November 17, 2009 at 8:35 pm
Nếu nói về thiết kế giao diện thì em nên tránh hoàn toàn phương pháp sử dụng Table
và cũng nên tránh luôn cả những chương trình WYSIWYG Editor như Dreamweaver.
Anh biết anh nói điều này có nhiều người sẽ không đồng tình về việc sử dụng trình
Dreamweaver. Nhưng cá nhân anh không thích những chương trình to, cồng kềnh và
nặng máy.
Hơn nữa những chương trình này khi cho ra code HTML cực kỳ khó hiểu và nhiều
“rác rưởi”. Em chỉ nên sử dụng Table cho dạng Data Tabular.
Reply
Quốc Anh says:
November 19, 2009 at 6:57 pm
Cho em hỏi trong CSS ngoài thành phần con ra còn có các thành phần cháu. Cái khó
ở đây là khi có các thành phần nhỏ hơn nữa.
Ví dụ như trong #Wrapper>#sidebar>#(…), #(…)
Cái div (…)là đồng cấp với nahu giờ em ko rõ đặt cái position của cái sidebar như
nào nữa nó cứ loạn lên.
Reply
Trung Hiếu says:
November 22, 2009 at 8:27 am
Anh ơi, trong ví dụ mà anh upload ở cuối bài này, trong đoạn code css có phần:
#featured img.featuredImg {
position: absolute;
top: -192px; right: -4px;
}

Em không hiểu tại sao la` -192 và -4px. Anh có thể giải thích giùm em không ạ.
Reply
Demon Warlock says:
November 22, 2009 at 10:27 am
Cái đó là tọa độ X và Y của tấm hình position absolute thôi em. Nếu thích em có thể
chỉnh sửa lại giá trị đó rồi xem trên trình duyệt sẽ rõ.
Reply
(^-^) says:
November 23, 2009 at 9:13 am
Em đang làm ví dụ về absolute cho bức ảnh, kết quả tuy tốt nhưng khi em kéo giao
diện trình duyệt nhỏ lại thì hình ảnh không bị cắt đi như các bức hình khác mà nó đẩy
các phần khác trong trang web. Ngồi hoài không biết làm thế nào để cho nó bị cắt khi
kéo nhỏ giao diện trình duyệt. Anh có cách nào không??? chỉ cho em với. Thanks
Reply
Absolute Position trong thiết kế giao diện | Học thiết kế web theo chuẩn.
3:04:32 PM]
Demon Warlock says:
November 23, 2009 at 9:18 am
Em có ví dụ cụ thể không? hình chụp hoặc link đến trang đó không?
Reply
(^-^) says:
November 23, 2009 at 10:32 am
Anh cho em email đi. Em sẽ gữi cho anh, vì ví dụ này em đang làm để chuẩn bị nộp
bài tập cho thầy. Em phải tự mày mò lấy nên không hiểu cho lắm. Nhờ có website của
anh nên em cũng đỡ nhiều.
Reply
(^-^) says:
November 23, 2009 at 10:33 am
Anh cho em email đi. Em sẽ gữi cho anh như vậy anh sẽ biết được code em viết, vì ví
dụ này em đang làm để chuẩn bị nộp bài tập cho thầy. Em phải tự mày mò lấy nên

không hiểu cho lắm. Nhờ có website của anh nên em cũng đỡ nhiều.
Reply
(^-^) says:
November 23, 2009 at 10:38 am
oh.sao gữi nhiều comment thế không biết. Xin lỗi anh nhé.
Reply
Demon Warlock says:
November 23, 2009 at 11:28 am
Em vào phần contact có email của Anh đó
Reply
(^-^) says:
November 23, 2009 at 10:31 pm
Em da gui email cho anh rui, mong anh giup do. thanks
Reply
Demon Warlock says:
November 23, 2009 at 10:46 pm
Nhìn qua code thì biết em khai báo không đúng phần Position Relative. Cho nên khi
kéo trình duyệt tấm hình nó định vị theo thành phần body nên gây ra hiệu ứng như
thế.
Code HTML của em nhìn giống “ma trận” ghê
Reply
Absolute Position trong thiết kế giao diện | Học thiết kế web theo chuẩn.
3:04:32 PM]
(^-^) says:
November 24, 2009 at 4:34 am
hi. Em mới tìm hiểu thôi nên cũng hơi giống ma trận thật,nhưng em đã khai báo
position relative ở thẻ div chứa bức ảnh rùi sau đó em mới sử dụng position absolute
cho thẻ div chứa image mà.
Anh xem kỹ lại giúp em với em hết cách rùi.
Reply

Quốc Anh says:
November 25, 2009 at 6:14 am
Cho em hỏi trong CSS ngoài thành phần con ra còn có các thành phần cháu. Cái khó
ở đây là khi có các thành phần nhỏ hơn nữa.
Ví dụ như trong #Wrapper>#sidebar>#(…), #(…)
Cái div (…)là đồng cấp với nahu giờ em ko rõ đặt cái position của cái sidebar như
nào nữa nó cứ loạn lên.
Reply
kimsangyoo says:
January 7, 2010 at 9:43 am
Bác DW cho em hỏi xíu nha: Absolution và z-index hình như giống nhau về chức
năng phải không vậy Bác. Em đang tò hai thành phần đó khác nhau ở điểm nào?
Reply
Demon Warlock says:
January 7, 2010 at 8:12 pm
Giống làm sao được chú! Absolute là để định vị thành phần còn Z-index để xác định
thành phần nào nằm trên, thành phần nào nằm dưới như lớp vậy.
Reply
clackken.smith says:
January 8, 2010 at 1:22 am
@kimsangyoo : DW nói tới lớp mới nhớ, giải thích thế này nhé, tính từ cầu thang về
phía tay phải của 1 dãy lớp học. Lớp đầu tiên gặp là lớp trên cùng, lớp thứ 2… cho
đến lớp cuối như vậy đó là z-index, giá trị z-index càng lớn thì lớp đó nằm trên. Trong
lớp có 45 chỗ ngồi, mỗi học sinh có một chỗ ngồi riêng, chẳng ai chồng chất lên ai, từ
cửa lớp tính vào thì học sinh thứ nhất sẽ đến học sinh thứ 2, chẳng phải hai học sinh
ngồi cùng 1 chỗ, ngồi lên nhau, đó được coi như là vị trí được định sẵn như là
Position. Cái lớp có Position : Relative, mỗi học sinh mang Position : Absolute. hi
hi.
@DW : Tiện thể muốn hỏi DW em có đoạn code thế này :
<div id="header">

<div id="in_header">
<img src=" " />
Reply
Absolute Position trong thiết kế giao diện | Học thiết kế web theo chuẩn.
3:04:32 PM]
</div><! End #in_header >
</div><! end #header >
- Position cho #header : Relative
- Position cho #in_header : Absolute. đó là điều hiển nhiên, nhưng em muốn cái
#in_header của em có Position là Relative để em có thể định dạng cho thẻ IMG trong
nó là Absolute thì làm sao ?, trong khi bản thân nó là Absolute và được điều chỉnh
theo #header ^^
Demon Warlock says:
January 8, 2010 at 7:58 am
Cái đó thì anh nghĩ cũng như bình thường thôi. Bởi vì nếu em đã đặt thẻ div#header
có position là Relative thì 2 cái con đều có thể là Absolute. Cả cái #in_header và img
đều là absolute. Nhưng cái #in_header thì định vị tương đối với #header còn img thì
tương đối với #in_header. Trong trường hợp này sử dụng giá trị âm là được hết.
Mà ít khi có trường hợp này xảy ra hỉ? trên lý thuyết thôi chứ hỉ?
Reply
Văn Đức says:
June 10, 2010 at 1:33 am
Anh ơi ! Em muốn học hướng đối tượng bằng php nhưng em không biết phải xuất
phát từ đâu.Em cũng có chút kiến thức về php rồi.Mong anh góp ý chỉ đường giùm
em cái.Em sẻch trên mạng không có tài liệu tiếng việt.Tiếng anh thì em học ko tốt lắm
Reply
Emily Pham says:
April 8, 2010 at 10:50 pm
Truoc gio minh toan tan dung FLOAT. Doc xong bai nay thi co the ap dung Position
thoai mai hon. Cam on Tac Gia nhieu lam nghen.

Reply
Sad Angel says:
April 13, 2010 at 1:20 am
Thank a nhìu. Chúc a sẽ có nhìu video tutorial hay hơn nữa.
.:: HAVE A NICE DAY! ::.
Reply
says:
April 13, 2010 at 9:20 pm
Reply
Sad Angel says:
April 14, 2010 at 10:48 pm
Reply
Absolute Position trong thiết kế giao diện | Học thiết kế web theo chuẩn.
3:04:32 PM]
A ui,làm thế nào cóa đc hình đại diện vậy a?
Clackken Smith says:
April 14, 2010 at 10:50 pm
em đã có rồi đó mà ^^
Reply
Sad Angel says:
April 14, 2010 at 10:50 pm
Ơ…đc òi kìa,Hjhj bjt sai ở đâu òi
.::: CHúc a 1 vui vẻ:::.
Reply
Sad Angel says:
April 14, 2010 at 10:52 pm
hjhjj thiếu chữ ngày
chít thật .:::CHúc a 1 ngày vui vẻ :::.
Reply
Mr Truyen says:

May 6, 2010 at 8:00 am
Anh thật tuyệt. em đang lơ mơ phần này dùng float ảnh của em nó cứ nhảy lên tận
trời xanh à thanks anh nhiêu yêu anh
Reply
nguyen_linh1987 says:
June 9, 2010 at 7:30 pm
Anh ơi …Nhưng em sử dụng thuộc tính Absolute của position thì khi co kéo lại khung
trình duyệt em thấy nó khác so với float…nếu m kết hợp cả với float thì có vẻ ai đó ko
xem fullscreen thì sẽ bị khác ở vài chỗ :-ss….m pải có 1 khung bao những cái
Absolute và đặt positon của nó là Relative hả anh
Reply
TT97IT says:
June 15, 2010 at 9:43 pm
Mình nghĩ ở cái trang demo Absolute Position:
—> <—
của Demon Warlock không ổn nếu dữ liệu động, ví dụ ở phần ul trong div "featured"
thêm mấy thể "li" với nội dung tương tự thì lập tức sẽ bị "tràn dữ liệu ra ngoài"….
Absolute Position có lẽ không phù hợp với dữ liệu động dài ngắn thay đổi nên nó
không được dùng nhiều bằng float.
Reply
Absolute Position trong thiết kế giao diện | Học thiết kế web theo chuẩn.
3:04:32 PM]
tuânnh says:
June 19, 2010 at 12:08 pm
troi oi, sao bây giờ tôi mới biết có trang tutorial tuyệt voi the nay ?!
thanks bạn rất nhiều
Reply
Tuan Vy says:
July 6, 2010 at 5:47 am
Cho mình hỏi, nếu div một định position:relative; div thứ hai (phụ thuộc vị trí div một)

định position:absolute rồi, dậy nếu có thêm dic thứ ba (phụ thuộc vị trí div hai) thì vị trí
định sao nữa? lập cái position sao dậy? Thanks
Reply
nhtera says:
July 6, 2010 at 11:23 pm
@Tuan Vy
Bạn đọc kĩ câu này sẽ hiểu ngay thôi :
“Khi một phần tử có position absolute nằm trong một phần tử khác có position
(relative,absolute) thì nó lấy gốc tọa độ là góc trên bên trái của phần tử đó “
Reply
Tuan Vy says:
July 12, 2010 at 9:07 pm
Mình làm được rùi, thanks.
Reply
Ngo Cham says:
July 15, 2010 at 11:34 pm
Trời ơi, may quá, Đúng là “buồn ngủ gặp chiếu manh”. Tìm mãi mới thấy 1 website
hướng dẫn CSS ngắn gọn và ngôn ngữ dịch chính xác. Mấy cái bài giảng ở các
website khác dịch cứ sao ý Cám ơn tác giả, cám ơn Google vì nhờ có nó tớ mới tìm
ra cái website này. Phải bookmark nó lại mới được
Reply
phongt94 says:
July 20, 2010 at 6:47 pm
Tôi biết: absolute position (AP) nó không phổ biến bằng float và clear (FC) là vì:
Dùng khi div1 không có độ cao cố định mà position: relative thì div tiếp theo dùng tiếp
postion: relative thì nó bị đè lên nhau. Nó không nhảy xuống dưới như dùng clear.
Có đúng không DW?
Reply
Absolute Position trong thiết kế giao diện | Học thiết kế web theo chuẩn.
3:04:32 PM]

Leave a comment
( Chọn hình đại diện )
Chọn kiểu gõ: Tự động TELEX VNI Tắt
ltbinh says:
July 28, 2010 at 7:16 pm
Đúng là position dùng thì hay thật,nhưng dùng để chia layout thì ko thể được
vì khi chia cột chưa có chiều cao thì những thằng bên dưới sẽ nhảy lên,tóm lại vẫn
phải dùng foat.cái này chỉ dùng để định vị những cái có kích thước cố định thôi(chẳng
hạn chèn ảnh vào vị trí nào đấy
Reply
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
proud of being powered by WordPress, which
is an exceptionally well written and beautiful
Rules are not made to be broken at Izwebz
Bạn không được tự ý copy và phát hành
lại nội dung của izwebz nếu chưa được sự
đồng ý của tôi.
Câu hỏi thường gặp
Liên hệ

Tác giả
Bản quyền
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
đó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.
Submit
Absolute Position trong thiết kế giao diện | Học thiết kế web theo chuẩn.
3:04:32 PM]
© 2008-2010 izwebz, All Rights Reserved. BACK TO TOP Powered by WordPress | Hand coded and designed by Demon Warlock
CMS 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
Được vậy tôi sẽ rất biết ơn bạn.