CSS Layout - The position Property

-

في هذا الدرس نتعرف على كيفية استخدام الخاصية position، و تُستخدم خاصية position  لتحديد مكان element حيث يمكن تحديد المكان (فوقtop ، تحت bottom، يمين right ، يسار left  )

طريقة الكتابة :

position: value;

 القيم Parameters or Arguments التي يمكن استخدامها :


القيمة 
الوصف
static

الموضع الطبيعي ل element (لن يكون هناك أي تأثير على مكان element)

div { position: static; }

relative

يتم وضع element  بالنسبة إلى المكان الذي كان من الممكن أن يكون فيه موضعه الطبيعي

div { position: relative; top: 10px; left: 15px; }

absolute

يتم وضع element بالنسبة الى container  التي يوجد بها

div { position: absolute; top: 10px; left: 15px; }

Fixed

تثبيت مكان element في مكان محدد بحيث لن يتحرك في حال تحريك scroll

div { position: fixed; top: 10px; left: 15px; }

inherit

سيرث element المكان بناء على مكان parent element

div { position: inherit; }

ملاحظات :
إذا تم استخدام الخصائص relative، absolute، fixed ، يمكن استخدام الخصائص top, right, bottom, and left معها.
إذا تم استخدام الخصائص static ، لا يمكن استخدام الخصائص top ، و right ، و bottom ، و left.

مثال :
نعمل ملف HTML باسم position  وبعدها نضيف الكود التالي : 
مثال : static

مثل ما حكينا باستخدام static موقع العنصر ثابت لا يتغير(يتم عرض element  حسب المكان المدخل في صفحة HTML)
ادخل الكود التالي في صفحة HTML 

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: static;
  left: 50px;
  border: 3px solid #4e4e4d;
}
</style>
</head>
<body>
<h2> static تطبيق </h2>
<div class="relative">
    static تطبيق  static تطبيق  static تطبيق  static تطبيق 
</div>
</body>
</html>
شغل الصفحة وشوف النتيجة 


شوف النتيجة : تم وضع div بالمكان الأصلي ولم يتم تطبيق الامر left: 50px; لان مثل ما حكينا مع static لا يكون ل left  أي تأثير. 

طيب الان نغير المكان الى relative

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  left: 50px;
  border: 3px solid #4e4e4d;
}
</style>
</head>
<body>
<h2> static تطبيق </h2>
<div class="relative">
    static تطبيق  static تطبيق  static تطبيق  static تطبيق 
</div>
</body>
</html>
شغل الصفحة وشوف النتيجة:

لاحظ ان تم تطبيق left: 50px; 

مثال position: fixed;
نفس الكود السابق نعدل عليه الى :

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: fixed;
  right: 0px;
  top:0px;
  width: 500px;
  border: 3px solid #4e4e4d;
}
</style>
</head>
<body>
<h2> fixed تطبيق </h2>
<div class="relative">
    fixed تطبيق  fixed تطبيق  fixed تطبيق  fixed تطبيق 
</div>
</body>
</html>
شغل الصفحة وشوف النتيجة :

حاول تغير حجم الصفحة او تزيد كتابة فيها حتي يبين scroll اكيد بتلاحظ ان مكان div ثابت وما عليه أي تغيير . 

مثال position: absolute;
عند استخدام هذا الموضع يتم تطبيق المكان بالنسبة الى اقرب element له. وفي حال لم يكن يوجد element قريبه منه يتم تطبيق المكان بالنسبة الى document body ويتم التحريك حسب scrolling للصفحة

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  width: 500px;
  height: 200px;
  border: 3px solid #5a5a59;
} 
div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 300px;
  height: 100px;
  border: 3px solid #5a5a59;
}
</style>
</head>
<body>
<h2> absolute تطبيق </h2>
<div class="relative">
    relative تطبيق  relative تطبيق  relative تطبيق  relative تطبيق 
    <div class="absolute">absolute تطبيق absolute تطبيق absolute تطبيق</div>
</div>
</body>
</html>
شغل الصفحة وشوف النتيجة 


عدل المثال السابق الى :

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  width: 500px;
  height: 200px;
  border: 3px solid #5a5a59;
} 
div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 300px;
  height: 100px;
  border: 3px solid #5a5a59;
}
</style>
</head>
<body>
<h2> absolute تطبيق </h2>
<div class="relative">
    relative تطبيق  relative تطبيق  relative تطبيق  relative تطبيق 
   
</div>
<div class="absolute">absolute تطبيق absolute تطبيق absolute تطبيق</div>
</body>
</html>
شغل الصفحة وشوف النتيجة.

مثال position: sticky
عند استخدم هذا الموضع يتم تثبيت element باء على scroll position بمعنى  انه يمكن استخدام scroll حتي يتم الوصول الى مكان هذا element وبعد الوصول اليه يتم تبيت مكان element على الشاشة.

يمكن القول ان هذا المكان يقوم بالتبديل بين relative و fixed حيث يتم تطبيق relative في البداية حتي يتم الوصول اليه بعد عمل scrolling ثم يتم تطبيق  fixed 

طبق الكود التالي في صفحة HTML

<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #d35014;
  border: 2px solid #2c2c2c;
}
</style>
</head>
<body>
<p> sticky تطبيق  <b>scroll</b> </p>
<div class="sticky"> مرحبا بكم </div>
<div style="padding-bottom:2000px">
  <p> هنا sticky postion   مرحبا بكم سيتم تطبيق</p>
  <p> السّيف أصدق أنباءً من الكتب، في حدّه الحدّ بين الجدّ واللعب.
</p>
  <p>السّيف أصدق أنباءً من الكتب، في حدّه الحدّ بين الجدّ واللعب. السّيف أصدق أنباءً من الكتب، في حدّه الحدّ بين الجدّ واللعب. السّيف أصدق أنباءً من الكتب، في حدّه الحدّ بين الجدّ واللعب.
 </p>
 
</div>
</body>
</html>
شغل الصفحة وشوف النتيجة :


حاول تحرك scroll  تبع الصفحة وشوف النتيجة