أسئلة حيرتني ...

[apitos]

السلام عليكم،

هذا الكود :

.hasJS .articles div div {
 position: absolute;
 top: -5000px;
 right: -5000px;
 padding-right: 5px;
}

1 - ما معنى absolute وما الفرق بينها وبين relative ومتى نضعها او لا نضعها ؟ (قرات على الموضوع كثيرا ولم استطع فهم الامر لحد الآن !!!)

2 - ما الغرض من وضع قيم تموضع خارج الصفحة ؟ وكيف هي div خارج الصفحة بـ -5000 فوق و -5000 من اليمين ورغم ذلك نراها في استعراض الصفحة !!!!؟

شكرا للمساعدة.

[حموديفيتش]

position: absolute; 

يعني الـ div راح يكون موقعه مطلق
وتحدد انت موقعه اعتماداً على الشاشة بالآعلى من الجهة اليسرى

 top: -5000px;
right: -5000px; 

وعندك محدد انه -5000 من اعلى
و -5000 من اليمين

اما

position: relative; 

تحدد موقع الـ div اعتماداً على الـ div الاب

[apitos]

حسنا :

absolute يحدد موضعها بالنسبة للصفحة.

relative يحدد موضعها بالنشبة لـ div آخر.

طيب لماذا في المثال الذي ارفقته لم نجعل تموضع الـ div الثاني relative بالنسبة للـ div الأول وجعلناه absolute بالنسبة لحدود الصفحة ؟

وهذا تتمة للسؤال الاول : متى نضع absolute ومتى نضع relative ؟

ويبقى السؤال السابق :

رغم تموضع الـ div خارج الصفحة (-5000 px) الا انها تظهر في العرض ؟

شكراً.

[أحمد عبدالمنعم]

أخ apitos لا تضع للأشياء تفسيرات عجيبة دائما تحيرك
فالخاصية كتب عنها في سوالف و أكثر من مدوّن كتب عنها بالتفصيل، خد عندك وربما هذا كل ما كُتب عنها مفصل بالعربية..

Css-Position من الدكتور نت // من cssbit // من المصنع // من مبدع.
..
و في سوالف أيضا و يمكنك القراءة عنها من تعريب سردال في html.net.

وعلى كلاً في المثال أول الموضوع الخاصية position بالوضع absolute سوف تطبق على آخر div في التسلسل العائلي كما هو مكتوب hasJS > articles > div > div وبما انه أخذ الوضع absolute -يعنى أصبح ابن ضايع- وله حرية الحركة في أي مكان داخل الصفحة أو خارجها!

اللى أفهمه من الخصائص أول الموضوع أن التنسيق html تم على هذا الشكل:

<div class="hasJS">
  <div class="articles">
    <div>
      <div></div>
    </div>
  </div>
</div>

ولو راجعنا القيم التى يأخذها نجد أن آخر div يرتفع بمقدار 5000 بكسل ويخرج تماماً عن الصفحة ذلك لأن القيمة سالبة (جرب أن تكون القيمة موجبة سيمتد العنصر الى داخل الصفحة)، ونفس الحال جهة اليمين فهو يخرج عن الصفحة بنفس القيمة ويختفي تماماُ، وتجدر الإشارة هنا أنه حتى يختفي العنصر بشكل سليم دون ظهور شريط التمرير السفلي إجعل الإتجاة الجانبي عكس إتجاة الصفحة -لو للغة العربية والصفحة من اليمين الى اليسار تكون القيمة موجبه و جهة اليسار أو سالبة و جهة اليمين والعكس صحيح-

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

بالمرفق مثال أفتح الصفحة وشاهدها، تجد أن العنصر الأخير أختفى تماماً من العرض ثم حاول وغير في القيم وشاهد ماذا يحدث..

أما relative بإختصار فهي خاصية لتغيير السلوك الطبيعي للعنصر -السلوك الطبيعي هو موقعة الفعلي في الصفحة- ولهذا نقول أنه يعتمد على div آخر أو العناصر من حوله، كما أن تلك الخاصية لها تأثير على الوضع absolute في حالة كان هو العنصر الأب له -راجع وصلات الشرح-

[apitos]

اهلا اخي كتوم.

شكرا جزيلا لاهتمامك بموضوعي ويشرفني ذلك.

يذكر صاحب الكود الاصلي انه قام باعطاء القيم -5000 من فوق ومن الجانب لاخفاء الـ div.

وذكر انه كان بامكانه ان يعطيه الخاصية : display:none ولكن فاقدي البصر اذا كان لهم جهاز خاص يستطيعون رؤية

الـ div بهذه الطريقة لذا ارتاى ان يعطيه قيم خارج اطار الصفحة.

حاولت مع المثال الذي ارفقته لي وتقدمت في الفهم بعض الشيء.

سوف احاول اعادة قراءة الدروس من الروابط التي ارفقتها لي لعلي اصل الى فهم الـ position بصورة نهائية.

شكرا واي استفسار سوف أعود لطرحه هنا.

[ليوناردو دافينشي]

عندي استفسار اخوي apitos .. :looking:

اذا كان فاقدي البصر ما بيشوفو الحاسوب كيف بدهم يشوفو عنصر عليه خاصية Display none

مش راضية تدخل مخي

وذكر انه كان بامكانه ان يعطيه الخاصية : display:none ولكن فاقدي البصر اذا كان لهم جهاز خاص يستطيعون رؤية

[khashabawy]

انت بتصدق اى حاجه ياريس دا بيهررررج معاك هههههه

[apitos]

العهدة على القائل.

وليس معناه اني اصدقه.

هذا الكلام جاء في سياق كلامه.

ما يهمني انه ساعدني في الحصول على الكود الابتدائي كنت بحاجة اليه.

واذا صادفته مرة اخرى سوف اطرح عليه سؤالا جانبيا حول الامر.

----------------
اخي كتوم :

تفقد رسالتي في بريدك الوارد على المصنع.

[المبدع العربي]

عندي استفسار اخوي apitos .. :looking:

اذا كان فاقدي البصر ما بيشوفو الحاسوب كيف بدهم يشوفو عنصر عليه خاصية Display none

مش راضية تدخل مخي

رؤيته هنا = ظهورها له..
فحواسيب المكفوفين لا تعرض الـcss.. فما نخفيه عن الزوار العاديين بالـcss سيظهر للمكفوفين..
وبالتالي سيقوم الجهاز بقراءته

[apitos]

على حسب الكاتب هو يقصد ضعاف البصر وليس لفاقديه كليا.