Pozisyon mutlak ama ebeveynle göreli

Question

Başka bir divun içinde iki div var, ve bir alt divı ana divun sağ üst köşesine yerleştirmek istiyorum ve diğer çocuk da css kullanarak ana divun altına geçsin. Yani, iki çocuk div ile mutlak konumlandırma kullanmak istiyorum, ancak onları sayfa yerine ana div ile göreli olarak konumlandırın. Bunu nasıl yapabilirim?

Numune html: position: absolute "top, right, bottom, leftposition: absolute veya position: relative sahiptir yakın atası olmak, kendini konumlandırmak için kullandığınız gibi bir anlama gelir, çünkü

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

Answer 1

#father { 
    position: relative; 
} 

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

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

Bu işleri ."

yüzden #father position: relative sahip olmalarını ve çocukların bundan çocukları konumlandırmak için top ve bottom kullanın position: absolute var.

Answer 2

div#father { 
    position: relative; 
} 
div#son1 { 
    position: absolute; 
    /* put your coords here */ 
} 
div#son2 { 
    position: absolute; 
    /* put your coords here */ 
} 

Answer 3

Ebeveyn için herhangi bir konum belirtmezseniz, varsayılan olarak static alır. eleman vücuda göre yerleştirilir böylece bu farkı anlamak istiyorsanız bu örnekte

Örnek 1 ::

İşte

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

#mainall 
{ 

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

üst sınıf bakın hiçbir konuma sahiptir. Bu örnekte, ana olarak 2 ::

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

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

Örnek dolayısıyla eleman göreli ana içindeki mutlak konumlandırılmış göreli konuma sahiptir.

Answer 4

Örtmek birisi Böl isteyen bir çocuk div doğrudan bir ebeveyn

#father { 
    position: relative; 
} 

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

Çalışma demo Codepen