في إصدار سابق من مواصفات تنسيق المربع المرن لـ CSS تعيين الوضع الثابت للعناصر الثانوية ذات الوضع المطلق على الرغم من أنها كانت عنصرًا مرنًا بحجم 0 بكسل × 0 بكسل. أحدث نسخة من المواصفات يخرجها تمامًا من التدفق ويضبط الوضع الثابت بناءً على الخصائص المحاذاة والضبط. في وقت كتابة هذا التقرير، يتيح متصفّح Edge وOpera 39 لأجهزة الكمبيوتر المكتبي وأجهزة Android هذه الميزة.
على سبيل المثال، دعنا نطبق بعض سلوكيات تحديد الموضع على HTML التالي.
<div class="container">
<div>
<p>In Chrome 52 and later, the green box should be centered vertically and horizontally in the red box.</p>
</div>
</div>
سنضيف شيئًا مثل هذا:
.container {
display: flex;
align-items: center;
justify-content: center;
}
.container > * {
position: absolute;
}
في الإصدار 52 من Chrome أو الإصدارات الأحدث، سيتم توسيط <div> المضمَّنة تمامًا في الحاوية <div>.
في المتصفحات غير المتوافقة، ستكون أعلى يمين المربّع الأخضر في وسط أعلى المربّع الأحمر.
إذا كنت تريد تجربة هذا الإجراء بنفسك في Chrome أو أي متصفّح آخر، يمكنك تنزيل النموذج أو الانتقال إلى العرض التوضيحي المباشر.