Beginning CSS: Cascading Style Sheets for Web Design, 2nd ...

Chapter 11: PositioningRelative PositioningRelative positioning has two primary purposes in web design.The first purpose is to create a point of reference for anabsolutely positioned element. When an element with absolutepositioning is nested within an element with relative positioning,the absolutely positioned element is positioned in context tothe dimensions of the relatively positioned element.Relative positioning is a lot like static positioning; elementsdon’t appear to leave the flow of the document.This element is positioned to the bottom right of therelatively positioned element.The four offset properties can also be applied to relativelypositioned elements, which can be used to modify the positionof an element.This element is offset from its original position.2. Save the preceding document as Example_11-2.html.3. Enter the following CSS in your text editor:body {font: 12px sans-serif;}div {background: yellow;border: 1px solid black;margin: 0 20px;}div#relative {position: relative;height: 200px;387