Hướng dẫn how do i overlap one element to another css? - làm cách nào để chồng chéo một phần tử này lên một css khác?

Nếu bạn muốn tạo ra những trải nghiệm hình ảnh tuyệt vời và độc đáo trên web, cuối cùng bạn sẽ cần hai yếu tố để chồng chéo hoặc tồn tại ở cùng một nơi. Bạn thậm chí có thể chỉ cần chúng được định vị gần hoặc cạnh nhau. Hãy cùng đi qua hai cách khác nhau để thực hiện điều này, một với thuộc tính vị trí và một với CSS Grid.

Phương pháp 1: Sử dụng thuộc tính vị trí

Bạn có thể đã biết rằng position: absolute; sẽ đặt một cái gì đó hoàn toàn trên trang bất cứ nơi nào bạn muốn. Trong trường hợp này, chúng tôi hoàn toàn định vị đứa trẻ vào hàng đầu của trang. Bất kể cha mẹ ở đâu, đứa trẻ sẽ được đặt ở góc đó, hoàn toàn.

.child {
  ...
  position: absolute;
  top: 0;
  left: 0;
}

Xem Pen CSS Stacking, Tuyệt đối 1 của Sarah Drasner (@SDRAS) trên Codepen.
CSS Stacking, Absolute 1 by Sarah Drasner (@sdras)
on CodePen.

Nhưng điều này rất giòn! Điều gì sẽ xảy ra nếu bạn đặt một cái gì đó trên trang và sau đó một cái gì đó khác xuất hiện sau nó? Có thể bạn có một biểu tượng trong một điều hướng mà bạn luôn muốn ở góc trên cùng bên trái, nhưng một bên thứ ba xuất hiện và đưa vào một quảng cáo biểu ngữ. .

Hoặc, hãy để nói rằng bạn muốn tạo ra một thành phần độc lập mà bạn có thể sử dụng ở nhiều nơi. Bạn cần nó được tái sử dụng và làm việc trong bối cảnh của chính nó, bất kể bạn sử dụng nó ở đâu.

Nếu chúng ta đặt

.child {
  /* ... */
  position: absolute;
  top: 0;
  left: 0;
}

.parent {
  position: relative;
}

.child {
  /* ... */
  position: absolute;
  top: 0;
  left: 0;
}

.parent {
  position: relative;
}

Xem Pen CSS xếp chồng, tuyệt đối 2 của Sarah Drasner (@SDRAS) trên Codepen.
CSS Stacking, Absolute 2 by Sarah Drasner (@sdras)
on CodePen.

Nice.

Chúng ta có thể sử dụng cùng một tiền đề này nếu chúng ta muốn xếp hai yếu tố lên nhau. Tại đây, chúng tôi sẽ có hai yếu tố trẻ em xếp chồng lên nhau và tách ra bằng 150 pixel. Chúng tôi sẽ thấy rằng họ bây giờ có trong cùng một phụ huynh đó và giữ vị trí bên trong nó.

  
Parent

  

    
Child 1
  

  

    
Child 2
  

.child {
  position: absolute;
  top: 0;
}

.child-1 {
  left: 0;
}

.child-2 {
  left: 150px;
}

.parent {
  position: relative;
}

Xem Pen CSS xếp chồng, tuyệt đối 3 của Sarah Drasner (@SDRAS) trên Codepen.
CSS Stacking, Absolute 3 by Sarah Drasner (@sdras)
on CodePen.

Đây là một trường học cũ, nhưng tôi đã sử dụng nó trong nhiều năm và tôi vẫn tiếp cận với nó. Nó hoạt động nhất quán trên các trình duyệt và có thể giúp bạn đạt được ngay cả các vị trí kỳ lạ và độc đáo.

Phương pháp 2: Sử dụng lưới CSS

Một cách tốt đẹp khác để chồng chéo các yếu tố, xếp chúng hoặc sửa đổi vị trí của chúng là CSS Grid, tùy thuộc vào thời gian bạn cần hỗ trợ bao xa (mà bạn có thể kiểm tra với Caniuse).

Chúng ta có thể đặt một cái gì đó mà chúng ta cần nó trong thùng chứa như thế này:

.parent {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 150px 1fr;
}

.child {
  grid-area: 1 / 1 / 2 / 2;
}

Xem Pen CSS Stacking, Grid 1 của Sarah Drasner (@SDRAS) trên Codepen.
CSS Stacking, Grid 1 by Sarah Drasner (@sdras)
on CodePen.

Và nếu một yếu tố nên xếp chồng lên nhau, chúng ta có thể đặt chúng vào cùng một khu vực lưới. Hãy để Lừa cũng bù đắp cho họ một chút bằng cách sử dụng một biên độ.

.parent {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 150px 1fr;
}

.child {
  grid-area: 1 / 1 / 2 / 2;
}

.child-2 {
  margin-left: 200px;
}

Xem Pen CSS Stacking, Grid 2 của Sarah Drasner (@SDRAS) trên Codepen.
CSS Stacking, Grid 2 by Sarah Drasner (@sdras)
on CodePen.

Nếu bạn thấy kỹ thuật này khó hình dung, tôi đã tạo ra một trình tạo lưới CSS mà hy vọng sẽ giúp nhìn thấy mọi thứ rõ ràng hơn.

Có rất nhiều nơi để sử dụng các kỹ thuật này! Bạn có thể xếp chồng, các yếu tố lớp và bù. Bạn có thể thực hiện điều hướng, chân trang. Bạn có thể tạo bất kỳ loại bố cục nào mà bạn muốn có nhiều kiểm soát hạt mịn hơn về cách đặt các yếu tố trên một trang.

Bạn có thể sử dụng định vị tương đối để chồng chéo các yếu tố của bạn. Tuy nhiên, không gian mà họ thường chiếm giữ vẫn sẽ được dành riêng cho yếu tố:

    DEFAULT POSITIONED


    RELATIVE POSITIONED


    DEFAULT POSITIONED

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

Nếu bạn sử dụng định vị tuyệt đối, các phần tử của bạn sẽ không có bất kỳ không gian dành riêng, vì vậy phần tử của bạn sẽ thực sự trùng lặp, mà không phá vỡ tài liệu của bạn:

    DEFAULT POSITIONED


    ABSOLUTE POSITIONED


    DEFAULT POSITIONED

Cuối cùng, bạn có thể kiểm soát các yếu tố nào trên các yếu tố khác bằng cách sử dụng Z-index:

    DEFAULT POSITIONED


    ABSOLUTE POSITIONED


    DEFAULT POSITIONED

Làm thế nào để bạn chồng chéo một div so với một div khác?

Điều nào sau đây giúp chồng chéo các yếu tố trong CSS?

Làm cách nào để tạo một phần tử chồng lên một phần tử khác trong HTML?

Làm thế nào để bạn kiểm soát sự chồng chéo trong CSS?