الموقف المطلق، يمكن للشخص أن يفسر هذا

Question

فيما يلي مقتطف من CSS أحتاج إلى شرحه:

#section {
    width: 860px;
    background: url(/blah.png);
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -445px;
}

حسنًا، من الواضح أن هذا هو الموضع المطلق للصورة.

1. الجزء العلوي يشبه الحشو من الأعلى، أليس كذلك؟
2. ماذا يفعل 50% من اليسار؟
3. لماذا يكون الهامش الأيسر عند -445 بكسل؟

تحديث:العرض 860 بكسل.الصورة الفعلية هي 100x100 إذا كان ذلك يشكل فرقا؟؟

Answer 1

1. القمة هي المسافة من أعلى عنصر html، أو من أعلى ذلك العنصر إذا كان ضمن عنصر آخر ذو موضع مطلق.

2. & 3.يعتمد ذلك على عرض الصورة ولكن قد يكون لتوسيط الصورة أفقيًا (إذا كان عرض الصورة 890 بكسل).هناك طرق أخرى لتوسيط الصورة أفقيًا.بشكل أكثر شيوعًا، يتم استخدام هذا لتوسيط كتلة معروفة الارتفاع عموديًا (هذه هي أسهل طريقة لتوسيط شيء معروف الارتفاع عموديًا):

   top: 50%
   margin-top: -(height/2)px;
   

Answer 2

ربما تم ذلك من أجل توسيط العنصر على الصفحة (باستخدام ملف "مركز الموت" تقنية).

يعمل مثل هذا:بافتراض أن عرض العنصر هو 890 بكسل، فقد تم ضبطه على position:absolute و left:50%, ، والذي يضعها الحافة اليسرى في ال مركز للمتصفح (حسنًا، يمكن أن يكون مركزًا لعنصر آخر به position:relative).

ثم يتم استخدام الهامش السلبي ل حرك حافة اليد اليسرى إلى اليسار مسافة تساوي نصف عرض العنصر, ، وبالتالي توسيطها.

بالطبع، قد لا يكون هذا هو توسيط العنصر بالضبط (يعتمد ذلك على مدى اتساع العنصر فعليًا، لا يوجد width في الكود الذي قمت بلصقه، لذلك من المستحيل التأكد) ولكن من المؤكد أنه يضع العنصر في وسط الصفحة

Answer 3

الجزء العلوي يشبه الحشو من أعلى اليمين؟

نعم، أعلى الصفحة.

ماذا يفعل 50% من اليسار؟

فهو ينقل المحتوى إلى وسط الشاشة (سيكون 100% على طول الطريق إلى اليمين).

لماذا يكون الهامش الأيسر عند -445 بكسل؟

بعد تحريكه بـ "يسار":50%"، يؤدي ذلك إلى نقلها بمقدار 445 بكسل إلى اليسار.

Answer 4

يتعلق المقتطف أعلاه بعنصر (يمكن أن يكون div أو امتدادًا أو صورة أو غير ذلك) بمعرف القسم.

يحتوي العنصر على صورة خلفية blah.png والتي ستتكرر في كلا الاتجاهين x وy.

سيتم وضع الحافة العلوية للعنصر على بعد 0 بكسل (أو أي وحدات أخرى) من أعلى العنصر الأصلي إذا كان الأصل أيضًا في موضعه بشكل مطلق.إذا كان الأصل هو النافذة، فسيكون في الحافة العلوية لنافذة المتصفح.

ستكون الحافة اليسرى للعنصر موضوعة بنسبة 50% من يسار الحافة اليسرى للعنصر الأصلي.

سيتم بعد ذلك "نقل" العنصر بمقدار 445 بكسل إلى اليسار من نقطة الـ 50% تلك.

Answer 5

ستكتشف كل ما تحتاج إلى معرفته من خلال القراءة في نموذج مربع CSS

Answer 6

عندما يكون الموضع مطلقًا، يكون الجزء العلوي هو المسافة العمودية من الأصل (ربما علامة الجسم، لذا فإن 0 هي الحافة العلوية لنافذة المتصفح).اليسار 50% هو المسافة من الحافة اليسرى.الهامش السلبي ينقله إلى اليسار بمقدار 445 بكسل.أما لماذا، فتخمينك جيد مثل تخميني.

Answer 7

على الرغم من احتمال أن أبدو مثل Captain Obvious، سأحاول شرح الأمر ببساطة قدر الإمكان.

Top هو رقم يحدد عدد البكسلات التي تريدها أن تكون من أعلى أي عنصر html موجود فوقه...لذلك ليس بالضرورة أعلى صفحتك.كن حذرًا من تنسيق HTML أثناء تصميم ملف CSS الخاص بك.

يجب أن ينقله يسارك إلى 50% إلى منتصف شاشتك، نظرًا لأنه 50.ضع في اعتبارك أن الأشخاص لديهم أحجام مختلفة للشاشة ويتم تخصيصها للجزء العلوي الأيسر من صورتك (0,0)، وليس لوسط الصورة، لذلك لن يتم تخصيصها بشكل مثالي لوسط شاشة الشخص كما تتوقع .

هذا هو سبب استخدام الهامش الأيسر إلى -445 بكسل - لتحريكه بشكل أكبر.

حظا سعيدا، وآمل أن يكون هذا منطقيا.كنت أحاول صياغة شرحي بشكل مختلف في حالة ما إذا كانت الإجابات الأخرى لا تزال تسبب لك وقتًا عصيبًا.لقد كانت إجابات رائعة أيضًا.

(إذا كان لديك شاشتان مختلفتان الحجم، أقترح التلاعب بالرمز لمعرفة كيف يؤثر كل تعديل على الشاشات ذات الأحجام المختلفة!)