السلام عليكم،
هذا الكود :
.hasJS .articles div div {
position: absolute;
top: -5000px;
right: -5000px;
padding-right: 5px;
}1 - ما معنى absolute وما الفرق بينها وبين relative ومتى نضعها او لا نضعها ؟ (قرات على الموضوع كثيرا ولم استطع فهم الامر لحد الآن !!!)
2 - ما الغرض من وضع قيم تموضع خارج الصفحة ؟ وكيف هي div خارج الصفحة بـ -5000 فوق و -5000 من اليمين ورغم ذلك نراها في استعراض الصفحة !!!!؟
شكرا للمساعدة.
apt كتب:السلام عليكم،
هذا الكود :
.hasJS .articles div div { position: absolute; top: -5000px; right: -5000px; padding-right: 5px; }1 - ما معنى absolute وما الفرق بينها وبين relative ومتى نضعها او لا نضعها ؟ (قرات على الموضوع كثيرا ولم استطع فهم الامر لحد الآن !!!)
2 - ما الغرض من وضع قيم تموضع خارج الصفحة ؟ وكيف هي div خارج الصفحة بـ -5000 فوق و -5000 من اليمين ورغم ذلك نراها في استعراض الصفحة !!!!؟
شكرا للمساعدة.
أخي الكريم هذا الكود للغة الـ css. وإذا كنت لا تعرف ما هي هذه اللغة، فهي تستحدم لتصميم واجهة المواقع اي (الصور، الروابط، أسماء الخطوط ، إلخ.....).
وإذا كنت تنوي العمل في مجال برمجة المواقع عليك تعلمها أو تعلم أساسياتها.
mazenwrq كتب:أخي الكريم هذا الكود للغة الـ css. وإذا كنت لا تعرف ما هي هذه اللغة، فهي تستحدم لتصميم واجهة المواقع اي (الصور، الروابط، أسماء الخطوط ، إلخ.....).
وإذا كنت تنوي العمل في مجال برمجة المواقع عليك تعلمها أو تعلم أساسياتها.
اهلا اخي مازن،
اعلم جيدا انها لغة الانماط الانسيابية.
ولكن اريد شرحا مبسطا على الاسئلة المطروحة في الموضوع.
شكراً.
حسنا :
absolute يحدد موضعها بالنسبة للصفحة.
relative يحدد موضعها بالنشبة لـ div آخر.
طيب لماذا في المثال الذي ارفقته لم نجعل تموضع الـ div الثاني relative بالنسبة للـ div الأول وجعلناه absolute بالنسبة لحدود الصفحة ؟
وهذا تتمة للسؤال الاول : متى نضع absolute ومتى نضع relative ؟
ويبقى السؤال السابق :
رغم تموضع الـ div خارج الصفحة (-5000 px) الا انها تظهر في العرض ؟
شكراً.
السلام عليكم
أخي apt
سأحاول الإجابة قدر معرفتي بـ CSS "لدي معرفة حسنة بها ، ولكن هنا لم أفهم بعض الأشياء :)"
بالنسبة لسؤالك عن متى نستعمل absolute ومتى نستعمل relative ؟
absolute : تعني الموضع بالنسبة للصفحة نفسها
و أما relative : الموضع بالنسبة "للجسم" الذي يحتويه، ليس دائما div كما قلت أنت، يمكن أن يكون الموضع بالنسبة لأي شيء آخر مثلا h1 أو p أو a ....
وموضوع أيها تستعمل: فهنا حسب حاجتك أنت ، إذا أردت أخبرني ماذا تريد أن تعمل و سوف أضع لك إن شاء الله كود كامل و مشروح بالتفصيل لتتعلّم.
بالنسبة للموضع خارج الصفحة:
أنظر أخي
div div
تعني إستعمال div داخل آخر و للتجربة إجعل div الأول ذو لون و div الثاني ذو لون آخر " الأول هو الكبير و الثاني يأتي داخله"
أنا جربتها و لم يظهر الثاني لأنه خارج الصفحة،
حسب رأيي:
يجب أن تعرف بأن المتصفحات تختلف في تطبيقها ل html و css فأنا أستعمل Firefox و لم يظهر عندي div الثاني
هذا ما جربته أنا
<html>
<head>
<style type="text/css">
div div{
position: absolute;
top: -5000px;
right: -5000px;
padding-right: 5px;}
</style>
</head>
<body>
<div style="background: #ff0; width: 200px; height: 200px; position: absolute; top: 64px; right: 200px;">
<div style="background: #f0f;">hy apt I am 3ml ;)</div>
</div>
</body>
</html>إحفظه بإمتداد html بواسطة المفكرة مثلا و قم بفتحه و سترى بأن المربع الأصفر وهو يمثل Div الأول فارغ
ثم قم بنزع -5000 "في top و left معا" و سترى أن div الثاني"بنفسجي" داخل الأول
شكرا لك أخي
أنا هنا إن أردت الإستفسار
تم تعديل هذه المشاركة بواسطة 3ml في 7 يناير 2010 في 21:40
والله اخلط كثيرا بين وضعيتي الـ position.
لذا اذا امكن ان تمدني بمثال كما ذكرت للتطبيق عليه.
بالنسبة لقيم -5000 ذكر صاحب الكود الاصلي انه قام بذبك لكي يخرج تماما الـ div من الصفحة.
وقد استبدل القيمة -5000 من فوق ومن الجانب عوض display:none لان بعض فاقدي البصر اذا كانوا مجهزين باجهزة خاصة ؟؟ قد يرون الـ div اذا كانت له الخاصية displqy:none.
واظن ان باقس الكود يظهر الـ div بالصفحة بتغيير قيم التموضع كما اسلفت في المثال اعلاه.
انتظر المثال.
شكراً.
السلام عليكم
أخي هذا مثال قم بوضعه في ملف و احفظه بإمتداد html و إفتحه بالمتصفح:
<html>
<head>
<style type="text/css">
#eg1 {
position: absolute;
top: 50px;
left: 50px;
background: #f0f;
width: 400px;
height: 300px;}
#eg2 {
position: relative;
top: 50px;
left: 90px;
background: #ff0;
width: 100px;
height: 100px;}
</style>
</head>
<body>
<div id="eg1">
<div id="eg2"></div>
</div>
</body>
</html>لاحظ جيدا المستطيل البنفسجي تموضعه هو absolute إذا: تموضعه هو 50 من الأعلى و 50 من اليسار بالنسبة للنافذة.
و أما المربع الأصفر تموضعه relative إذا: تموضعه هو 50 من الأعلى و 90 من اليسار و لكن بالنسبة للمستطيل الأول "البنفسجي" و ليس بالنسبة للنافذة لأنه relative و معناها تناسبي.
أعتقد بأن الفكرة وصلت :)
إذا لم تفهم بعد أكتب مثالا و أنا سأحاول تصحيحه و ستفهم إن شاء الله.
تم تعديل هذه المشاركة بواسطة 3ml في 20 يناير 2010 في 22:44
نعم فهمت relative.
معناه تحديد تموضع بالنسبة للعنصر قبله في الترتيب.
و absolute تموضعها يكون بالنسبة لاطار الصفحة في الحالة الافتراضية ويكون تموضعه بالنسبة لعنصر قبله اذا كان يحمل التموضع relative.
هكذا لا ؟
تماما
أرى بأنك فهمت الفكرة جيدا
فقط أريد أن أشير إلى أن التموضع relative لا يغطّي الأجسام الأخرى أو النصوص ، مثلا إذا وضعت نص في div و داخل هذا ال div و ضعت div آخر
فال div الثاني لن يخفي النص بل سيكون تحته
أما التموضع absolute فإذا كان مكانه فوق أي شيء آخر فإنه يخفيه أي يقوم بتغطيته
أنظر هذه الصورة و ستفهم
ال div الأحمر قام بتغطية جزء من الأصفر لأن تموضعه Absolute أما لو كان relative لكان في الأسفل قليلا و لا يغطي ال div الأصفر
تم تعديل هذه المشاركة بواسطة 3ml في 21 يناير 2010 في 12:06