10/20/2016

Lesson14:PositioningofelementsentutorialHTML.net

Lesson14:Positioningofelements
WithCSSpositioning,youcanplaceanelementexactlywhereyouwantitonyourpage.Togetherwithfloats(see
lesson13),positioninggivesyoumanypossibilitiestocreateanadvancedandpreciselayout.
Thefollowingwillbediscussedinthislesson:
TheprinciplebehindCSSpositioning
Absolutepositioning
Relativepositioning

TheprinciplebehindCSSpositioning
Imagineabrowserwindowasasystemofcoordinates:

TheprinciplebehindCSSpositioningisthatyoucanpositionanyboxanywhereinthesystemofcoordinates.
Let'ssaywewanttopositionaheadline.Byusingtheboxmodel(seelesson9)theheadlinewillappearasfollows:

Ifwewantthisheadlinepositioned100pxfromthetopofthedocumentand200pxfromtheleftofthedocument,we
couldtypethefollowinginourCSS:

h1{

position:absolute;
top:100px;
left:200px;

http://html.net/tutorials/css/lesson14.php

1/4

10/20/2016

Lesson14:PositioningofelementsentutorialHTML.net

Theresultwillbeasfollows:

Asyoucansee,positioningwithCSSisaveryprecisetechniquetoplaceelements.Itismucheasierthantryingto
usetables,transparentimagesoranythingelse.

Absolutepositioning
Anelementwhichispositionedabsolutedoesnotobtainanyspaceinthedocument.Thismeansthatitdoesnot
leaveanemptyspaceafterbeingpositioned.
Topositionanelementabsolutely,thepositionpropertyissetasabsolute.Youcansubsequentlyusetheproperties
left,right,top,andbottomtoplacethebox.
Asanexampleofabsolutepositioning,wechoosetoplace4boxesineachcornerofthedocument:

#box1{

position:absolute;

top:50px;

left:50px;
}

#box2{

position:absolute;

top:50px;

right:50px;
}

#box3{

position:absolute;

bottom:50px;

right:50px;
}

#box4{

position:absolute;

bottom:50px;

http://html.net/tutorials/css/lesson14.php

2/4

10/20/2016

Lesson14:PositioningofelementsentutorialHTML.net

left:50px;
RelatedtopicsintheCSSForum

Replies

Views

Showexample

Relativepositioning
Topositionanelementrelatively,thepropertypositionissetasrelative.Thedifferencebetweenabsoluteand
relativepositioningishowthepositionisbeingcalculated.
Thepositionforanelementwhichisrelativelypositionediscalculatedfromtheoriginalpositioninthe
document.Thatmeansthatyoumovetheelementtotheright,totheleft,upordown.Thisway,theelementstill
obtainsaspaceinthedocumentafteritispositioned.
Asanexampleofrelativepositioning,wecantrytopositionthreepicturesrelativelytotheiroriginalpositiononthe
page.Noticehowthepicturesleaveemptyspacesattheiroriginalpositionsinthedocument:

#dog1{

}
#dog2{

position:relative;
left:350px;
bottom:150px;
position:relative;
left:150px;
bottom:500px;

#dog3{

position:relative;

left:50px;

bottom:700px;
}

Showexample

Summary
Intheprevioustwolessons,youlearnedhowtofloatandpositionelements.Thesetwomethodsgiveyoumany
opportunitiestoconstructyourpageswithouthavingtousesomeoftheoldfashionedmethodswithtablesand
transparentimagesinHTML.UseCSSinstead.Itismoreprecise,givesyoumoreadvantages,anditisalsofar
easiertomaintain.
RelatedtopicsintheCSSForum

Replies

Views

<div>PositioningQuestionPleaseseeifyoucananswer!

4422

Csslesson14:positioningofelements

4947

Positioningofelementsatlesson16

4785

http://html.net/tutorials/css/lesson14.php

3/4

10/20/2016

Lesson14:PositioningofelementsentutorialHTML.net

RelatedtopicsintheCSSForum

Replies

Views

Howtosizeandpositiona'Submit'button?

5709

Position

7915

+Postanewtopic

<<Lesson13:Floatingelements(floats)

http://html.net/tutorials/css/lesson14.php

Lesson15:Layeronlayerwithzindex(Layers)>>

4/4