یادگیری پیکربندی با CSSاستفاده از position در یک مثال عملی گویا تر خواهد بود. در زیر یک نمونه از پیکر بندی یک صفحه ی واقعی را می‌بینید.
.container {
position: relative;
}
nav {
position: absolute;
left: 0px;
width: 200px;
}
section {
/* position is static by default */
margin-left: 200px;
}
footer {
position: fixed;
bottom: 0;
left: 0;
height: 70px;
background-color: white;
width: 100%;
}
body {
margin-bottom: 120px;
}با margin-left برای sectionها این اطمینان پیدا می‌شود که برای nav جا به اندازه ی کافی باز شده است.
نفس باد صبا مشک فشان خواهد شد/عالم پیر دگرباره جوان خواهد شد/ارغوان جام عقیقی به سمن خواهد داد/چشم نرگس به شقایق نگران خواهد شد/این تطاول که کشید از غم هجران بلبل/تا سراپرده گل نعره زنان خواهد شد/گر ز مسجد به خرابات شدم خرده مگیر/مجلس وعظ دراز است و زمان خواهد شد/ای دل ار عشرت امروز به فردا فکنی/مایه نقد بقا را که ضمان خواهد شد/ماه شعبان منه از دست قدح کاین خورشید/از نظر تا شب عید رمضان خواهد شد/گل عزیز است غنیمت شمریدش صحبت/که به باغ آمد از این راه و از آن خواهد شد/مطربا مجلس انس است غزل خوان و سرود/چند گویی که چنین رفت و چنان خواهد شد/حافظ از بهر تو آمد سوی اقلیم وجود/قدمی نه به وداعش که روان خواهد شد
</section>دقت کنید که چه اتفاقی می‌افتد وقتی که صفحه ی مرورگر خود را تغییر اندازه می‌دهید. به خوبی کار می‌کند!
</section>این مثال کار کرد، زیرا در آن container از nav بلند تر است. اگر نبود، nav از container بیرون می‌زد. در صفحات بعدی، سایر تکنیک‌های پیکربندی را مورد بررسی قرار خواهیم داد که باعث می‌شود جنبه‌های بیشتری از آن برای ما آشکار شود.