مرحبًا بالجميع، عودًة حميدة. اليوم سوف نتحدث عن وضع العناصر
في صفحة الويب الخاصة بك. لذلك حاول أن تنسق صفحتك و وربما تكون عملية برمجتك
هى من أكثر عمليات الترميز استهلاكًا للوقت، ومن المحتمل أن تكون من أكثر الأشياء المحبطة
التي ستقوم بها في هذه الدورة. وهذا كان من أحد الأسباب
التي من أجلها تركت هذا أسبوع كامل تقريبًا حتى تتدرب على وضع الأشياء على صفحتك. الأفكار نفسها بسيطة للغاية وواضحة ، ولكن هو وضعها معًا، وإضافتك المزيد والمزيد في الصفحة الخاصة بك،
تجعل الأشياء تبدو صعبة بعض الشئ. لذلك دعونا نبدأ الحديث عن عناصر تحديد المواقع المختلفة، أو خصائص المواقع المختلفة
التي يمكننا استخدامها، حسنًا؟ إن خصائص الموضع الأربعة
هى إحصائي، نسبي، مطلق وثابت، والجزء الأهم هو أنهم مختلفون تماما. إن الطريقة التي تعمل بها معًا،
أو كيف تعمل، هى أن كل منها يمكن أيضًا تعديلها بخصائص
مثل أعلى، يمين، أسفل، ويسار. لذا فأنت تحدد نوع الموضع
الذي تريد أن يكون عليه العنصر، يمكنك أن تقول، أريد ان يكون بعيدًا عن القمة أو، هذا فوق للأسفل أو هذا بعيد عن اليسار لذلك دعنا نبدأ بخاصية الإحصاء static
والسبب الذي يجعلنا نبدأ بها هو أنك كنت بالفعل تستخدمها طوال الوقت. وهو ما نسميه القيمة الافتراضية للعنصر. إذا لم تقل أي شئ أخر فإنه يضع هذه القميه. الطريقة التي تعمل بها
هو أن المتصفح يقوم بوضع كل عنصر فقط في المكان المتاح التالي. يمكنك إعطاؤه قيمًا
مثل أعلى، أسفل، يسار، ويمين، لكن سيقوم المتصفح بتجاهلها تماما. كيف سيعمل؟ شيء من هذا القبيل. دعوني أرى إن استطع رسم ذلك هنا. هل لديك شاشتك. وحان الوقت لتبدأ بإضافة أشياء إلى صفحتك
ويبدأ المتصفح في العمل، حسنا هذا عنصر امتداد span لذا فهو مناسب هنا. وعنصر الامتداد التالي، لذا فهو مناسب هنا. يا إلهي، لقد حصلت على شئ ما، لذا أريد النزول هنا إلى الأسفل. وهكذا كما تضيف، يتم البدأ فقط بأعلى،
وتستمر في العمل بشكل عرضي، ثم تنزل للأسفل. ولكن يمكننا أن نذهب إلى أبعد من ذلك. يمكننا تغيير طريقة وضع المتصفح للأشياء، واحدة من الطرق التي يمكننا القيام بها
هي استخدام موضع نسبي قريب. وعندما أقول نسبي، أقصد نسبة إلى نفسها. أين ستذهب؟ حسنًا، دعونا نتعمق في ذلك بعض الشئ. هذا أساسا شبيه جدا بالموقع الثابت، لكن الاّن يمكنك إضافة هذه المميزات. الموضوع الجديد، المكان الجديد الذي نضع فيه العنصر، لن يؤثر ذلك على أي عنصر من العناصر المجاورة. ومع ذلك، فما يفعله هو ترك فجوات في المكان الذي كان من المفترض أنه يكون فيه المتصفح في المقام الأول. عادة ، ما يتم استخدام عناصر الموضع النسبية كحاويات أو ككتل للعناصر الأخرى. لذا دعوني أريكم فقط مثالًا سريعًا آخر هنا. قم بتشغيل هذا. لدى نافذة المتصفح،
ولنقول أنني على وشك أن أضع عنصر الامتداد span element سيذهب هناك. ومع ذلك حسنًا، إذا قلت أن الموضع نسبي، وأعطيته بعض الأرقام كالعشرة الأوائل
بدلاً من وضعه هنا، سيذهب في واقع الأمر للأسفل،
حيث ينبغي أن يكون. لذا مرةً أخرى ،
نضيف فقط أرقامًا صغيرة لنقل الأشياء من حيث تذهب عادة. الموقع القادم هو ما نطلق عليه المطلق. وهذا يسبب ارتباكًا بين الناس
عند البدأ في استخدامه لأول مرة، لأن المتصفح ، بدلاً من وضعه في الموضع التالي المتاح ، يتجاهل جميع العناصر ،
وفقط ينظر إلى الحاوية الرئيسية التي كان فيها. في هذه الحالة ، سنوضح مثالًا واحدًا عن المتصفح. العناصر الأخرى الموجودة على الصفحة
كما لو كانت غير موجودة. وقد يؤدي ذلك إلى
أنه من الممكن أن تجد عنصرًا فوق الاّخر. لنجرب ذلك لدى المتصفح الخاص بي، ليس لدى متسع كبير هنا، إذن ، هنا ، دعنا نفترض
أنني لدى عنصر التقسيم DIVالخاص بي وقررت أنه مطلق ،
ويجب أن يكون 100 أسفل من الأعلى، ربما 100 في الأعلى. إذًايذهب هنا يمينًا. حسنًا، ماذا لو أصبح الموقع نسبيًا سيذهب العنصر التالي أسفله. ولكن إذا كان لدينا قيمتان مطلقتان ،
فإن القيمة التالية التي تظهر، ستنتقل مرة أخرى فوقها مباشرة. حسناً ، الموضع النهائي
الذي سأتحدث عنه، يطلق عليه ثابت. والموضع الثابت يتعلق بنافذة المتصفح. هذه هي الطريقة التي يستطيعون بها
إنشاء هذه الصفحات، حيث تظهر لك أحيانًا هذه النوافذ المنبثقة
ولا يمكن التخلص منها. يمكنك الاستمرار في التمرير والتمرير، وهى تتبعك. حسنًا، ما قاموا به هو أنهم استخدموا الموضع الثابت. هذا العنصر لن يتحرك ، حتى وإن تم تحريك النافذة. فقط يمكنك معرفة ما إذا كنت تستخدم بعض المتصفحات القديمة
أو كنت تحاول تصميمها لـ Internet Explorer 7 أو 8 ،
يعمل هذا فقط إذا كنت تستخدم HTML5 DOCTYPE. لذا مرة أخرى عندما تفكر في الوضع الثابت ،
فكر في المربعات المنبثقة التي لن تختفي. أو قد ترغب أيضًا في التفكير في الأمر
على أنه شيء أكثر فائدة عندما تكون أنت على الصفحة ، وربما يكون شريط التنقل هذا في الأعلى ، و أثناء قيامك بالمرو في الصفحة ،
لن تحتاج إلى المرور إلى الخلف لرؤية شريط التنقل، لأنه دائمًا فقط هناك. لذلك دعونا نمضي قدمًا ونرى مثالاً،
حيث تمكنت من الحصول على عناصر مختلفة تستخدم تعتمد على خصائص الموضع المختلفة. حسنًا ، أنا على وشك أن أريك صفحة ذهبت إليها ووضعت بها عنصرين. فقط عنصران من عناصر التقسيم divs ، وفقرتان. ولكي نبدأ، قمت بعمل تصميم مبدأي لهم فقط حتى يمكن التمييز بينهما. بالنسبة لعنصر التقسيم الخاص بنا div ،
فموضعه نسبي، وأعطيته ارتفاعًا، وعرضًا، وإطارًا. بالنسبة للفقرات، صممت لها إطارًا بلون مختلف، ضفت إليها قمة ومسافة لليسار،
وتركتها كموضع ثابت، لأن هذا هو الوضع الافتراضي الذي سيظل دائمًا. لذا أريد أن أريكم كيف يبدو ذلك في المتصفح. لذا إذا نظرت، يمكنك أن ترى أن لدي اثنين من عناصر التقسيم،
أحدهما بالأعلى هنا والاّخر هنا بالأسفل، ولدي ثلاثة فقرات. واحد، يصيح، معذرةً. واحد اثنان ثلاثة أول شئ أريد أن أوضحه
هو أن هذا لا يبدو بالضبط بنفس الطريقة التي قد تتوقع أن يظهر بها،
أو حتى بالضبط بنفس الطريقة التي قد يراها البعض إذا قمت بتحميل متصفحك. بدلاً من وضع هذه الفقرة طوال الوقت في الأعلى، سنقوم بوضعها في الأسفل بعض الشئ. نفس الشئ بالنسبة ل B و C. والسبب في ذلك هو أن كافة المتصفحات له قيم افتراضية مختلفة، حسب المكان الذي يجب وضع الفقرة فيه. لذا، اسمحوا لي بالتمرير هنا لثانية. سأنتقل لأسفل. ويمكنك أن ترى هنا رمزًا غريبًا، webkit-margin قبل، و webkit-margin بعد. هذا مثال لبعض الفئات الزائفة pseudo classes التي استخدموها. لذا لا أريد أن يتم استخدام هذه الأشياء الافتراضية المختلفة. لذا، سأمضي قدمًا، وأتخلص منها. وبعد أن أعلق على هذا
وأقوم بالتعليق مرة أخرى، سأقوم بالتحديث، والاّن لدينا العنصر A و C. لذا، مرة أخرى، إن العناصر A ، و B و C كلها نسبية. أنت تأمر المتصفح،
فقط ضعه في المساحة التالية المتاحة. لذا فلنرى ما يحدث الاّن
إذا قمت بتغيير العنصر الخاص بي من عنصر نسبي إلى ثابت، أو،
عذرًا، من ثابت إلى نسبي. ويمكنك أن ترى أنها تحركت والسبب في تحركها
هو أنني أعطيتها قيم 100 أعلى، و 100 يسارًا. فلتهبط لأسفل، وقم بالدفع. إن قمت بتغييرها إلى 50. عفًوًا، 59، سيكون جيدًا. يمكنك أن ترى أنها لا تتحرك كثيرًا. لذا، بالنسبة للثابتة
اذهب لأول مكان يمكنك الذهاب إليه. اذهب لأول مكان تستطيع الذهاب إليه،
ولكن امضِ قدمًا، يمكنك أن تحدد
إذا كنت تريده أن يتحرك في أى اتجاه من الاتجاهين. أما الشئ الثاني الذي سنقوم به هو مطلق. ربما. لنذهب هناك، لذا أريدك أن تلاحظ شئ ما. أن A و B فوق بعضهما البعض. لأنك قلت أنك تريدها أن تكون 100 بكسل للأسفل، وبعيدًا عن جانب عنصر الحاوية ب 59 بكسل. في هذه الحالة، هذا هو عنصر التقسيم. لذا فهذا أمر غريب لأنهم فوق بعضهم البعض،
كما أن كافة العناصر مختلطة ببعضها. هناك حالات ستريد فيها
أن تكون الأشياء فوق بعضها البعض. ربما تكون أحدها مرئية، وسيتم إخفاء إحداها، وسوف تتغير ديناميكيًا. ولكن هذا ما يحدث مع الأشياء المطلقة. الاّن، إذا قمت بالتمرير،
سأجعل هذه الشاشة صغيرة بعض الشئ، ثم أقوم بالتمرير، يمكنك أن ترى A و B يتحركان بعيدًا. وبالطبع، قمت بضرب بهذا المثال
لأنني أردت أن أوضح لك أنني إذا قمت بتبديل هذا هذا العنصر الاّن إلى ثابت،
بدلاً من قول أعد العنصر النسبي لأصله، يمكنك القول أعد ،
ضع هذا العنصر النسبي في المتصفح بالكامل. لذا، فالاّن كل شئ يكون فوق بعضه البعض،
حتى لو حاولت تحريكه بعيدًا. هذا ليس صحيحًا. يبقي هنا. حسنًا؟ لذا فمرة أخرى،
إنها ساكنة، نسبية، مطلقة وثابتة. وأريدك أن تجرب هذه الحالات،
وتعرف خياراتك، قبل أن تبدأ علية الترميز يدويًا. والاّن، أحد الأشياء التي أريد أن أعرضها عليكم هي إمكانية وضع عدة عناصر
في نفس المكان أو فوق بعضها البعض. وهناك طريقة للتعامل مع ذلك
إذا لم يعجبك الترتيب الذي تبدو عليه العناصر. وهذا ما يطلق عليه مؤشر Z. إن مؤشر Z هو مجرد قيمة رقمية في الأساس، إما موجبة أو سالبة، وهى تشير للمتصفح ترتيبك. لذا إذا كان لديك شئ ما وأردت حقًا التأكد من أنه دائمًا في المقدمة، امضِ قدمًا وضع شيئًا ك 100 عليه. إن لم تكن مهتمًا حقًا، يمكنك إعطاءه سالب 100. وهى هى الطريقة التي يمضى بها الناس قدمًا، ويضعوا بها العناصر
لتكون أكثر ديناميكية بعض الشئ عندما نضيف بعض الجافا
أو أشياء مختلفة من هذا القبيل. لذا فإن مؤشر Z
لا يستخدمه العديد من الأشخاص، ولكنه مفيد حقًا عندما تستخدم عنصر فحص. إذا كان هناك شئ ما أدناه وتريد أن تعرف
كيف يبدو في الأعلى. لذلك دعونا نمضي قدما و نراجع. إن تحديد موضع العنصر الخاص بك المفتاح
لكى تنشأ الصفحة التي تريد إنشائها. وهذا هام بشكل خاص إذا كنت قلقًا
بشأن ظهور موقعك بشكل جيد. شاشة صغيرة، شاشة كبيرة، وهكذا دواليك. لذا فإن التخطيط السليم
سيجعل الأمر أكثر سهولة لك حينما يحين وقت برمجة صفحتك. لكن في الحقيقة، أهم شئ يمكنك أن تفعله الاّن
هو الاتصال بالإنترنت والعثور على تلك المحاضرات والمراجع المختلفة
التي تتحدث عن وضع العناصر واستذكارها حتى تشعر بثقة أكثر عن طريقة عملها. حظ سعيد.