Đặt một div liên quan đến div khác không phải là cha mẹ của nó bằng cách sử dụng CSS

Question

Tôi biết về thủ thuật position:relative và position:absolute để định vị một div tương ứng với cha mẹ của nó. Nhưng nếu div không phải là cha mẹ của nó và tôi muốn vị trí của nó liên quan đến điều đó? Tôi đang cố gắng thực hiện điều gì đó dọc theo những dòng đó.

Tôi cũng biết về position:fixed để sửa lỗi div nhưng tôi đang tạo trang web đáp ứng và tôi muốn tránh điều đó. Tôi tìm thấy một câu hỏi ở đây mà đề cập đến bằng cách sử dụng jQuery để làm điều đó: How to position one element relative to another with jQuery? jQuery là cách duy nhất để làm điều đó? Nó có thể được thực hiện bằng cách sử dụng CSS không?

Tôi đã đặt một câu đố ở đây: http://jsfiddle.net/19bdpgsf/. Trong fiddle, tôi đang cố gắng để vị trí các yếu tố child2 liên quan đến các notparentdiv giống như nó đã được định vị tương đối với parent div. Có thể sử dụng chỉ css?

Cảm ơn.

Answer 1

Bạn có thể sử dụng vị trí tuyệt đối (tương đối so với toàn bộ nội dung của trang), nhưng khác hơn là tôi không nghĩ có cách nào khác ngoài jQuery.

Answer 2

Một cách khác nếu bạn không muốn sử dụng vị trí css sử dụng bù đắp jquery như dưới đây để xác định vị trí bạn div

var nonparent = $('.notParent'); 
 
var position = nonparent.offset(); 
 
$('.child1').offset({ 
 
    top: position.top, 
 
    left: position.left 
 
});

.notParent { 
 
    background-color: red; 
 
    padding: 20px; 
 
} 
 
.child2 { 
 
    background-color: yellow; 
 
} 
 
.child1 { 
 
    background-color: green; 
 
} 
 
.parent { 
 
    background-color: purple; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="notParent"> 
 
    not parent div 
 
</div> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<div class="parent"> 
 
    parent 
 
    <div class="child1">child1</div> 
 
    <div class="child2"> 
 
    child2 
 
    </div> 
 
</div>

Bạn có thể xác định vị trí một div bên trong một div mà không phải là cha mẹ với vị trí tương đối tuyệt đối như dưới đây

.notParent { 
 
    background-color: red; 
 
    position: relative; 
 
} 
 
.child2 { 
 
    background-color: yellow; 
 
    position: absolute; 
 
    top: 10px; 
 
} 
 
.child1 { 
 
    background-color: green; 
 
    top: 30px; 
 
} 
 
.parent { 
 
    background-color: purple; 
 
}

<div class="notParent"> 
 
    not parent div 
 
</div> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<div class="parent"> 
 
    parent 
 
    <div class="child1">child1</div> 
 
    <div class="child2"> 
 
    child2 
 
    </div> 
 
</div>