تحديد موقع العناصر في لغة CSS
يعد وضع العناصر بشكل مناسب على صفحات الويب أمرًا ضروريًا لتصميم مخطط جيد لهذه الصفحات. هناك عدة طرق في لغة CSS يمكننا استخدامها لتحديد موقع العنصر. في هذا الدرس سوف نتعلم طرق تحديد المواقع واحدة تلو الأخرى.
الموقع الثابت للعنصر Static
العنصر الثابت الموقع هو عنصر HTML بالوضع الإفتراضي , وتكون قيمة الخاصية position له static وهي القيمة الإفتراضية.
يتم دائمًا وضع العنصر الثابت الموقع وفقًا للتدفق الطبيعي للصفحة. لا تتأثر العناصر الموضوعة بشكل ثابت بالخصائص top و bottom و left و right و z-index .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Static الموقع الثابت للعنصر</title>
<style>
body {
direction:rtl;
text-align:center;
font-size:26px;
}
.box{
color: #fff;
background: #7dc765;
padding: 20px;
}
.cont{
padding: 50px;
margin: 50px;
position: relative;
border: 5px solid black;
font-family: Arial, sans-serif;
}
.cont p{
line-height: 50px;
}
</style>
</head>
<body>
<div class="cont">
<div class="box">
<h2>الموقع الثابت للعنصر Static</h2>
<div><strong>ملاحظة:</strong> هذا الصندوق ثابت إفتراضيا . يتم وضعه دائمًا وفقًا للتدفق الطبيعي للصفحة..</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
<p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu.</p>
</div>
</body>
</html>
المخرجات
الموقع النسبي للعنصر Relative
الموقع النسبي للعنصر هو موقع هذا العنصر بالنسبة إلى موقعه الطبيعي. يتم التحكم في الموقع النسبي للعنصر عن طريق القيمة relative للخاصية position.
في مخطط تحديد المواقع النسبي ، يتم حساب موقع صندوق العنصر وفقًا للتدفق الطبيعي. ثم ينتقل الصندوق من هذا الوضع الطبيعي وفقًا للخصائص - top أو bottom و / أو left أو right.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Relative الموقع النسبي للعنصر</title>
<style>
body {
direction:rtl;
text-align:center;
font-size:26px;
}
.box{
position: relative;
left: 100px;
color: #fff;
background: #00c4cc;
padding: 20px;
}
.cont{
padding: 50px;
margin: 50px;
border: 5px solid black;
font-family: Arial, sans-serif;
}
.cont p{
line-height: 50px;
}
</style>
</head>
<body>
<div class="cont">
<div class="box">
<h2>الموقع النسبي للعنصر Relative</h2>
<div><strong>ملاحظة:</strong>يتم إزاحة حافة الهامش الأيسر لصندوق DIV هذا إلى اليمين بمقدار 100 بكسل من موضعها الأصلي. سيتم الاحتفاظ بالمساحة الاصلية للعنصر . .</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
<p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu.</p>
</div>
</body>
</html>
المخرجات
يمكن نقل عنصر متوضع نسبيًا و ان يتداخل مع عناصر أخرى ، لكنه يحافظ على المساحة المخصصة له في التدفق الطبيعي.
الموقع المطلق للعنصر Absolute
يطلق على العنصر العنصر المطلق الموقع عند تحديد قيمة الخاصية position له بالقيمة absolute .
يتم وضع العنصر المطلق الموقع بالنسبة إلى العنصر الأب الأول الذي له قيمة للخاصية position غير القيمة static. إذا لم يتم العثور على مثل هذا العنصر ، فسيتم وضعه في الزاوية "أعلى اليسار" من نافذة المتصفح. يمكن أيضًا تحديد إزاحات الصندوق باستخدام واحدة أو أكثر من الخصائص top و right و bottom و left.
يتم إخراج العناصر المطلقة تمامًا من التدفق الطبيعي وبالتالي لا تشغل مساحة في موقعها الأصلي. ومع ذلك ، يمكن أن تتداخل العناصر المطلقة مع العناصر الأخرى اعتمادًا على قيمة الخاصية z-index. أيضًا ، يمكن أن يكون للعناصر المطلقة هوامش ، ولا تتداخل مع أي هوامش أخرى.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Absolute الموقع المطلق للعنصر</title>
<style>
body {
direction:rtl;
text-align:center;
font-size:26px;
}
.box{
position: absolute;
top: 200px;
left: 100px;
color: #fff;
width: 60%;
background: #4cafdf;
padding: 20px;
}
.cont{
padding: 50px;
margin: 50px;
position: relative;
border: 5px solid black;
font-family: Arial, sans-serif;
}
.cont p{
line-height: 50px;
}
</style>
</head>
<body>
<div class="cont">
<div class="box">
<h2>الموقع المطلق للعنصر Absolute</h2>
<div><strong>ملاحظة:</strong>يتم وضع هذا الصندوق في موضع بالنسبة لعنصر DIV الأب. إنه يمرر مع الصفحة. </div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
<p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu.</p>
</div>
</body>
</html>
المخرجات
الموقع المثبت للعنصر Fixed
الموقع المثبت للعنصر هو فئة فرعية من تحديد الموقع المطلق. يتم تثبت العنصر إضافة القيمة fixed للخاصية position التابعة له.
الاختلاف الوحيد هو أن العنصر المثبت الموقع يكون ثابتًا فيما يتعلق بإطار عرض المتصفح ولا يتحرك عند التمرير.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>الموقع المثبت للعنصر Fixed</title>
<style>
body {
direction:rtl;
text-align:center;
font-size:26px;
}
.box{
position: fixed;
top: 200px;
left: 100px;
color: #fff;
width: 60%;
background: #f44712;
padding: 20px;
}
.cont{
padding: 50px;
margin: 50px;
position: relative;
border: 5px solid black;
font-family: Arial, sans-serif;
}
.cont p{
line-height: 50px;
}
</style>
</head>
<body>
<div class="cont">
<div class="box">
<h2>الموقع المثبت للعنصر Fixed
</h2>
<div><strong>ملاحظة:</strong>موقع هذا الصندوق مثبت بالنسبة إلى إطار عرض صفحة الويب. لا يتم تمرير هذا العنصر مع الصفحة. </div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
<p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu.</p>
</div>
</body>
</html>
المخرجات
