Absolute Position trong thit k giao din

C mt thc t rng Absolute Position tuy rt hay v mnh nhng li cha c s dng ng vi thc lc ca n. a phn ngi ta thng s dng Float v dng Padding hoc Margin cn chnh cc thnh phn trong giao din vi nhau. Nhng nh bn cng bit, giao din vi Float rt mong manh. Ch cn sai cht xu l c giao din c th b v. l cha k n nhng bt cp ca Float nh phi clear float v i khi n thc s rt kh qun l. Nhng khng hiu v l do ti sao Float c s dng rt rng ri v vt ra ngoi d nh ban u ca nhng ngi pht trin CSS. u tin Float ch c thit k a hnh nh vo nhng v tr thch hp. Nhng dn d n c s dng kh ph bin trong thit k giao din. Ni vy khng phi l ti khng thch Float hoc s dng Float l khng tt, m s thc th ti cng s dng Float kh nhiu trong thit k giao din. Nhng nu dng n kt hp vi Absolute Position trong CSS th gip giao din ca bn c th tng thch vi nhiu trnh duyt m khng cn phi p dng hack cho IE. Trong bi ny chng ta s tm hiu s qua v Absolute Position trong Relative Position. Ti c mt video v Contextual Positioning ni rt r v mi lin h gia Relative Position v Absolute Position. Nhng v y l khi nim ht sc quan trng do vy trong bi ny ti cng ni li mt cht. v d di y ti s dng Absolute Position nh v 3 th div nm trong th div ln l #wrapper.

1 2 3 4 5 6 7
Vi Absolute Position bn c th s dng cc gi tr: px, em v % v vi cc v tr: top, right, bottom v left. Tuy nhin trong thc t bn ch cn 2 gi tr l top v left (hoc right) th cng nh v mt thnh phn ri.
<div id="right">&nbsp;</div> </div> <div id="middle">&nbsp;</div> <div id="wrapper"> <div id="left">&nbsp;</div>

Mo nh: Nu trong qu trnh nh v ta vi Absolute bn phi lm i lm li nhiu ln. Th nay bn c th s dng addon Firebug nh v chnh xc n tng Pixel. Ti c lm mt video hng dn cch s dng Firebug.

v d trn th div#wrapper c position: relative, n s ng vai tr lm thnh phn bao quanh cho 3 th div c position: absolute nm bn trong n. Nu ta b gi tr position: relative th div#wrapper i th 3 th div trong s nh hu lc m v chy ton lon ht. Uhm! thc ra cng khng ton lon m n s nhnbody lm m nui v nh v theo b m mi ny.

Chnh v th iu quan trng nht trong khi s dng Absolute Position l xc nh thnh phn bao quanh v t position ca n thnh relative

Nghe cng hay m bn c v d trong thc t khng?

Ti bit l bn s hi do vy ti chun b trc mt giao din c s dng Absolute Position cho bn tham kho. Bn s d dng nhn thy giao din ny c mt tm hnh ln chon ht phn Header v n nm chng chnh gia. y l v d hon ho v s dng Absolute Position nh v cc thnh phn. Ngoi ra cc thnh phn cn li nh thanh di chuyn trn v di, logo v phn Featured u c s dng Absolute Position. Ti th trong IE 6, 7 v 8 v hu nh khng phi hack bt c phn no ngoi tr phn PNG hack cho IE 6. Nu giao din ny lm bng Float th s t nht l cng phi hack ci Double Margin ca IE. Bn c th download v d ny v xem phn code HTML v CSS