تُستخدم خاصية الموضع في CSS لتعيين موضع عنصر ما في الصفحة، ومن خلال هذه الخاصية يمكنك وضع أي سمة في المكان الذي تراه مناسبًا.
تحدد سمة الموضع نوع موضع العنصر. تحدد هذه السمة آلية تحديد الموضع المستخدمة لإنشاء تخطيط العنصر. يمكن تحديد موضع أي عنصر، لكن العناصر المطلقة أو الثابتة تولد مربعًا على مستوى الكتلة، بغض النظر عن نوع العنصر نفسه. يتم إزاحة العنصر الذي تم وضعه نسبيًا من موضعه الافتراضي في التدفق الطبيعي.
تحدد سمة الموضع نوع طريقة تحديد الموضع المطبقة على العنصر (ثابت، نسبي، ثابت، مطلق، أو ثابت):
يتم وضع العناصر فعليًا باستخدام السمات العلوية والسفلية واليسار واليمين. ومع ذلك، هذه الخصائص ليس لها أي تأثير ما لم يتم تعيين خاصية الموضع أولاً. أنها تعمل بشكل مختلف اعتمادا على قيمة الموقف.
1. تحديد المواقع ثابت: ثابت
يتم وضع عناصر HTML بشكل ثابت بشكل افتراضي.
لا تتأثر العناصر ذات الموضع الثابت بالسمات العلوية والسفلية واليسار واليمين.
العنصر ذو الموضع: static لا يتم وضعه بأي طريقة خاصة؛ يتم وضعه دائمًا وفقًا للتدفق الطبيعي للصفحة:
مثال:
<!DOCTYPEhtml><html><head><style>div{height:100px;border:1pxsolidblack;}div.static{width:130px;height:50px;background-color:#CCC;line-hei ght:50px;text-align:center;position:static;top:50px;left:20px;}</style></head><body><div><divclass=static>item;</div></ ديف></بودي></أتش تي أم أل>نتائج التشغيل:
2. الوضع النسبي: نسبي
مثال:
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;bac لون الأرض:أحمر;</style></head><body><divid=content><divid=item1>item1</div><divid=item2>item2</div></div></body >></html>نتائج التشغيل:
إذا قمت بتغيير ملف نمط CSS في الكود كما يلي:
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;background-color:red; Position:relative;left:20px;top:20px;}</style></head><body><divid=content><divid=item1>item1</div><divid=item2>item2</div>< /div></body></html>نتائج التشغيل:
ملخص: النسبي عبارة عن إزاحة بالنسبة إلى موضع تدفق المستند العادي، ولا يزال الموضع المشغول في الأصل موجودًا، مما يعني أنه لن يؤثر على موضع العناصر اللاحقة. اليسار يعني الإزاحة بالنسبة إلى الجانب الأيمن من الموضع الأصلي، والأعلى يعني الإزاحة بالنسبة إلى الجزء السفلي من الموضع الأصلي. عندما يوجد اليسار واليمين في نفس الوقت، يكون اليسار فقط صالحًا. عندما يكون هناك أعلى وأسفل في نفس الوقت، يكون الجزء العلوي فقط صالحًا. تعتمد الإزاحة النسبية على الجانب الأيسر العلوي من هامش الكائن.
3. الوضع المطلق: مطلق
مثال:
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;background-color:red;}# شركة ntent{margin-left:100px;margin-top:100px;}</style></head><body><divid=content><divid=item1>item1</div><divid=item2>item2</div </div></body></html>نتائج التشغيل:
عند تعديل ملفات نمط CSS:
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;background-color:red;position: مطلق؛يسار: 20px;top:20px;}#content{margin-left:100px;margin-top:100px;}</style></head><body><divid=content><divid=item1>item1</div>< divid=item2>item2</div></div></body></html>نتائج التشغيل:
يمكن ملاحظة أنه عندما تكون قيمة سمة الموضع للعنصر الأصلي هي القيمة الافتراضية (ثابتة)، يتم وضع المطلق بالنسبة لنافذة المتصفح.
إذا تم تعيين قيمة سمة الموضع للمحتوى على قيمة غير افتراضية، فسيتم وضع المطلق بالنسبة للعنصر الأصلي:
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;background-color:red;position: مطلق؛ يسار: 20 بكسل؛ أعلى :20px;}#content{margin-left:100px;margin-top:100px;position:relative</style></head><body><divid=content><divid=item1>item1</div>< divid=item2>item2</div></div></body></html>نتائج التشغيل:
تابع تعديل نمط CSS:
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;background-color:red;}# المحتوى{الهامش الأيسر:100px;mar gin-top:100px;position:absolute;padding:20px;border:10pxsolidblack;}</style></head><body><divid=content><divid=item1>item1</div><divid=item2> البند2</div></div></body></html>نتائج التشغيل:
هل لاحظت التغيير؟ عند ضبط div الخارجي على القيمة المطلقة، يتغير عرض div الخارجي من 100% إلى تلقائي.
عندما تقوم بتعيين خاصية الموضع لعنصر ما إلى مطلقة أو ثابتة، تحدث ثلاثة أشياء:
(1) انقل العنصر طبقة واحدة إلى اتجاه المحور Z. يكون العنصر خارج التدفق العادي، لذلك لم يعد يشغل مساحة الطبقة الأصلية وسيغطي عناصر الطبقة السفلية.
(2) سيصبح العنصر عنصرًا على مستوى الكتلة، وهو ما يعادل إعداد العرض: block للعنصر (أعط عنصرًا مضمنًا، مثل <span>، وبعد الإعداد المطلق، ستجد أنه يمكنه تعيين العرض والارتفاع).
(3) إذا كان العنصر عنصرًا على مستوى الكتلة، فسيتغير عرض العنصر من العرض الأصلي: 100% (يشغل سطرًا واحدًا) إلى العرض التلقائي.
4. تحديد المواقع الثابتة: ثابت
الموضع الثابت هو وضع العنصر بالنسبة لنافذة المتصفح، ولن يتحرك العنصر الذي يستخدم الموضع الثابت بسبب تمرير نافذة المتصفح، كما لو كان ثابتًا على الصفحة يتم تحقيق ذلك باستخدام تحديد المواقع الثابتة.
مثال:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title></title><style>.out{border:red1pxsolid;height:600px;width:500px;}.in{border:blue1pxsolid; الارتفاع:200px;العرض:200px;}</style></head><body><divclass=outstyle=posit ion:relative;><divclass=instyle=background-color:wheat;></div><divclass=instyle=background-color:red;position:fixed;left:20px;bottom:10px;></div>< divclass=instyle=background-color:blue;></div></div></body></html>نتائج التشغيل:
5. تحديد المواقع لزجة: لزجة
يختلف الموضع الثابت عن طرق تحديد الموضع الأربعة التي تم تقديمها مسبقًا، فهو يشبه مزيجًا من الموضع النسبي والموضع الثابت. عندما يتم تمرير الصفحة، يكون تأثيره هو نفس الموضع النسبي سوف يظهر مرة أخرى تأثير تحديد المواقع الثابتة. على سبيل المثال، تكون قائمة التنقل في بعض صفحات الويب في موضعها الافتراضي عند تحميل الصفحة، ويتم تثبيتها في أعلى الصفحة عند التمرير لأسفل.
مثال:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title></title><style>.out{border:red1pxsolid;height:600px;width:500px;}.in{border:blue1pxsolid; الارتفاع: 200 بكسل; العرض: 250 بكسل;</style></head ><body><divclass=out><divclass=instyle=background-color:wheat;></div><divclass=instyle=background-color:red;></div><divclass=instyle=background-color: أزرق;></div></div></body></html>نتائج التشغيل:
