cssbit 2.0

هذا درس بسيط وسريع لاستخدام position ب css
لدينا، صندوق عرضه وارتفاعه 400px يحتوي على صندوقين بعرض وارتفاع 150px:

كود XHTML:

<div id='box'>
  <div id='box-1'></div>
  <div id='box-2'></div>
</div>

صندوق عرضه وارتقاعه 400px مع border للصندوق لتحديده

كود CSS:

#box {width: 400px; height: 400px; border: 2px solid #eee}

باستعمال الخاصية position: absolute وإعطاء قيم ل top و left سأضيف ما يلي

#box-1 {
  position: absolute; 
  top: 40px; left: 80px; 
  background: #669933; 
  width: 150px; height: 150px
}

الصندوق الأول ذو اللون الأخضر يقع على ارتفاع 40px من (الصندوق الأم أم من أعلى الصفحة ؟ )، وعلى مسافة تبعد ب 80px من اليسار
اما الصندوق الثاني (يمكن ان يكون صورة أو نص أو …):

#box-2 {
  position: absolute; 
  top: 100px; left: 150px; 
  background: #AE8AB7; 
  width: 150px; height: 150px
}

مثال هنا:

الصندوقين الاخضر والبنفسجي لا علاقة لهما بالصندوق الأول وغير مرتبطين به، وللتأكد من ذلك يكفي أن أغير مكان الصندوق الأم الى الوسط:

#box {margin: 0 auto}

الان سيتغير مكان الصندوق الرئيسي ليظهر في وسط الصفحة، لكن لن ينتقل الصندوق الاول والثاني معه وسيظلان في يسار الصفحة

Demo 1

ولاحل هذه المشكلة وأجعل الصندوقين مرتبطين بالصندوق الأم الذي يحتويهما سأضيف خاصية relative كالتالي:

#box {position: relative}

Demo 2

خلاصة الدرس:
كيفية استعمال absolute وفائدة relative

This entry was posted on الأربعاء, أكتوبر 15th, 2008 at 2:09 م and is filed under دروس. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.