html - www - موقف مطلق ولكن نسبة إلى الوالد




www w3schools com html5 (3)

لدي قسمين داخل div آخر ، وأريد وضع div div واحد إلى أعلى يمين div الأصل ، والطفل الآخر div إلى أسفل div div مستخدم css. أي ، أريد استخدام الموضع المطلق مع قسمي الطفلين ، ولكن ضعهما بالنسبة إلى div الأصل بدلاً من الصفحة. كيف يمكنني أن أفعل هذا؟

نموذج html:

<div id="father">
   <div id="son1"></div>
   <div id="son2"></div>
</div>

Incase شخص ما يريد أن ينشر الطفل div مباشرة تحت الوالدين

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 100%;
}

العمل التجريبي Codepen


إذا كنت لا تعطي أي موقف لأولي الأمر ثم يأخذ بشكل افتراضي static . إذا كنت تريد أن تفهم أن الفرق يشير إلى هذا المثال

مثال 1::

http://jsfiddle.net/Cr9KB/1/

   #mainall
{

    background-color:red;
    height:150px;
    overflow:scroll
}

هنا لا يوجد لدى الصف الأصل مكانًا لذلك يتم وضع العنصر وفقًا للجسم.

المثال الثاني ::

http://jsfiddle.net/Cr9KB/2/

#mainall
{
    position:relative;
    background-color:red;
    height:150px;
    overflow:scroll
}

في هذا المثال يحتوي الأصل على موضع نسبي ومن ثم يتم وضع العنصر المطلق داخل الأصل النسبي.


#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 0;
}

#son2 {
   position: absolute;
   bottom: 0;
}

يعمل هذا لأن position: absolute يعني شيئًا مثل "استخدام top أو right أو bottom أو left لموضعك في ما يتعلق بأقرب سلف له position: absolute أو position: relative ".

لذا ، نجعل من #father position: relative ، ولدى الأطفال position: absolute ، ثم استخدم top bottom لوضع الأطفال.





css