Phần tử chồng chéo trong CSS

Question

Tôi làm cách nào để tạo hai phần tử chồng lấp trong CSS, ví dụ:

<div>Content 1</div> 
<div>Content 2</div> 

Tôi muốn hai nội dung (chúng có thể là bất kỳ thứ gì) chồng lên nhau, vì vậy Nội dung 2 được hiển thị bắt đầu ở cùng góc trên cùng bên trái như Nội dung 1 và chúng xuất hiện chồng lên nhau. Nội dung 1 nên bắt đầu trong luồng thông thường của tài liệu chứ không phải ở một số vị trí cố định trên màn hình.

Điều này có khả thi không?

Cảm ơn,

AJ

Answer 1

cách dễ nhất là sử dụng position:absolute trên cả hai yếu tố này. Bạn có thể hoàn toàn vị trí tương đối để trang, hoặc bạn có thể hoàn toàn vị trí liên quan đến một div container bằng cách thiết lập div container để position:relative

<div id="container" style="position:relative;"> 
    <div id="div1" style="position:absolute; top:0; left:0;"></div> 
    <div id="div2" style="position:absolute; top:0; left:0;"></div> 
</div> 

Answer 2

Tôi nghĩ rằng bạn có thể nhận được ngay với sử dụng định vị tương đối và sau đó đặt trên/trái vị trí của DIV thứ hai cho đến khi bạn có nó ở vị trí mong muốn.

Answer 3

Bạn có thể sử dụng vị trí tương đối để chồng lên các phần tử của mình. Tuy nhiên, không gian mà họ thường chiếm vẫn sẽ được dành riêng cho các phần tử:

<div style="background-color:#f00;width:200px;height:100px;"> 
    DEFAULT POSITIONED 
</div> 
<div style="background-color:#0f0;width:200px;height:100px;position:relative;top:-50px;left:50px;"> 
    RELATIVE POSITIONED 
</div> 
<div style="background-color:#00f;width:200px;height:100px;"> 
    DEFAULT POSITIONED 
</div> 

Trong ví dụ trên, sẽ có một khối không gian trắng giữa hai 'DEFAULT vị trí' yếu tố. Điều này được gây ra, bởi vì phần tử 'RELATIVE POSITIONED' vẫn có không gian dành riêng.

Nếu bạn sử dụng định vị tuyệt đối, các yếu tố của bạn sẽ không có bất kỳ không gian dành, vì vậy yếu tố của bạn sẽ thực sự chồng chéo lên nhau, mà không vi phạm tài liệu của bạn:

<div style="background-color:#f00;width:200px;height:100px;"> 
    DEFAULT POSITIONED 
</div> 
<div style="background-color:#0f0;width:200px;height:100px;position:absolute;top:50px;left:50px;"> 
    ABSOLUTE POSITIONED 
</div> 
<div style="background-color:#00f;width:200px;height:100px;"> 
    DEFAULT POSITIONED 
</div> 

Cuối cùng, bạn có thể kiểm soát yếu tố này là trên đỉnh của những người khác bằng cách sử dụng chỉ mục z:

<div style="z-index:10;background-color:#f00;width:200px;height:100px;"> 
    DEFAULT POSITIONED 
</div> 
<div style="z-index:5;background-color:#0f0;width:200px;height:100px;position:absolute;top:50px;left:50px;"> 
    ABSOLUTE POSITIONED 
</div> 
<div style="z-index:0;background-color:#00f;width:200px;height:100px;"> 
    DEFAULT POSITIONED 
</div>