Vị trí tuyệt đối nhưng liên quan đến cha mẹ

Question

Tôi có hai div bên trong div khác và tôi muốn đặt một div con ở trên cùng bên phải div cha và div con khác ở dưới cùng của div cha bằng css. Tức là, tôi muốn sử dụng vị trí tuyệt đối với hai div con, nhưng định vị chúng tương ứng với div cha hơn là trang. Tôi có thể làm cái này như thế nào?

mẫu html:

<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; 
} 

này hoạt động vì position: absolute nghĩa cái gì đó như "sử dụng top, right, bottom, left đến vị trí của mình trong mối quan hệ với tổ tiên gần người có position: absolute hoặc position: relative . "

Vì vậy, chúng tôi thực hiện #father có position: relative và trẻ em có position: absolute, sau đó sử dụng top và bottom để định vị trẻ em.

Answer 2

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

Answer 3

Nếu bạn không cung cấp bất kỳ vị trí nào cho cha mẹ thì theo mặc định, phải mất static. Nếu bạn muốn hiểu sự khác biệt mà tham khảo ví dụ này

Ví dụ 1 ::

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

#mainall 
{ 

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

Đây tầng lớp phụ huynh không có vị trí rất yếu tố được đặt theo cơ thể.

Ví dụ 2 ::

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

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

Trong ví dụ phụ huynh này có vị trí tương đối do đó yếu tố được định vị tuyệt đối bên mẹ tương đối.

Answer 4

Trong trường hợp ai đó muốn postion một đứa trẻ div trực thuộc cha mẹ

#father { 
    position: relative; 
} 

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

Làm việc bản demo Codepen