CSS – التموضع Positioning

تستخدم الخاصية position لتحديد الطريقة التي نستخدمها لتحديد تموضع العنصر. يوجد مجموعة من القيم لتلك الخاصية تحدد طريقة التموضع وهي:

• static: هي الطريقة الافتراضية لتموضع العنصر ولا تتأثر بقيم left و top .
• relative: يكون تموضع العنصر نسبيا للموضع الافتراضي للعنصر ويتم تحديدها بواسطة left و top.
• absolute: يكون تموضع العنصر غير نسبي اي يتم تحديد موضعه بناءا على قيمة left و top.
• fixed: يكون تموضع العنصر نسبة الى اطار العرض وثابت اي لا يتأثر بالتمرير scroll.

الخاصة left و top تحدد البعد/المسافة الذي سيكون بداية العنصر فيه.

التموضع position : static

هو التموضع الافتراضي ولا تتأثر عناصر HTML بقيم left و top.

p.staticElement1{
	position: static;
	left: 30px;
	top: 10px;
	
	border-width: 2px;
}

p.staticElement2{
	position: static;
	left: 20px;
	top: 50px;
	
	border-width: 2px;
}

التموضع position : relative

يكون تموضع عناصر HTML نسبيا للموضع الافتراضي للعنصر الذي كان سيتواجد فيه لو كان static ويتم تحديدها بواسطة left و top.

p.relativeElement1{
	position: relative;
	left: 30px;
	top: 10px;
	
	border-width: 2px;
}

p.relativeElement2{
	position: relative;
	left: 20px;
	top: 50px;
	
	border-width: 2px;
}

التموضع position : absolute

يكون تموضع عناصر HTML نسبيا للموضع بشكل غير نسبي اي يتم تحديدها بواسطة left و top ولا تعتبر وجود عناصر في هذا المكان ام لا اي يمكن ان تقع عناصر فوق بعضها.

p.absoluteElement1{
	position: absolute;
	left: 20px;
	top: 70px;
	
	border-color: green;
	border-width: 2px;
}

p.absoluteElement2{
	position: absolute;
	left: 20px;
	top: 50px;
	
	border-color: red;
	border-width: 2px;
}

التموضع position : fixed

يكون تموضع عناصر HTML نسبيا للموضع بشكل غير نسبي اي يتم تحديدها بواسطة left و top تشبه التموضع absolute لكن تكون left و top ثابتة مع التمرير scroll (لا تتأثر به)

p.fixedElement1{
	position: fixed;
	left: 20px;
	top: 70px;
	
	border-color: green;
	border-width: 2px;
}

p.fixedElement2{
	position: fixed;
	left: 20px;
	top: 50px;
	
	border-color: red;
	border-width: 2px;
}