Hướng dẫn which of the following helps overlap elements in css? - điều nào sau đây giúp chồng lấp các phần tử trong css?

Question

Thuộc tính CSS

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

0 có thể được sử dụng trong liên hợp với thuộc tính vị trí để tạo hiệu ứng của các lớp như Photoshop.

Nội dung chính Show

Xếp các thành phần trong các lớp sử dụng thuộc tính Z-index
Phương pháp 1: Sử dụng thuộc tính vị trí
Phương pháp 2: Sử dụng lưới CSS

Xếp các thành phần trong các lớp sử dụng thuộc tính Z-index

Thông thường các trang HTML được coi là hai chiều, bởi vì văn bản, hình ảnh và các yếu tố khác được sắp xếp trên trang mà không chồng chéo. Tuy nhiên, ngoài các vị trí ngang và dọc của chúng, các hộp cũng có thể được xếp theo trục z cũng tức là một trên đầu kia bằng cách sử dụng thuộc tính CSS

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

0. Thuộc tính này chỉ định mức ngăn xếp của một hộp có giá trị

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

2 là một trong số

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

3,

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

4 hoặc

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

5.

Vị trí trục z của mỗi lớp được biểu thị dưới dạng số nguyên đại diện cho thứ tự xếp chồng để kết xuất. Một phần tử có

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

0 lớn hơn chồng lên một phần tử có phần thấp hơn.

Một thuộc tính

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

0 có thể giúp bạn tạo bố cục trang web phức tạp hơn. Sau đây là ví dụ cho thấy cách tạo các lớp trong CSS.

.box {
    position: absolute;
    left: 10px;
    top: 20px;
    z-index: 2;
}

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ố:

<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 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:

<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 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:

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

DigitalOcean cung cấp các sản phẩm đám mây cho mọi giai đoạn của hành trình của bạn. Bắt đầu với $ 200 trong tín dụng miễn phí!

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

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

8 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

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

9 vào phần tử cha mẹ, bất cứ điều gì bên trong nó với

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

8 sẽ được đặt hoàn toàn, liên quan đến đơn vị chứa đó!

.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ó.

<div class="parent">
  <h2>Parent</h2>

  <div class="child child-1">
    <h2>Child 1</h2>
  </div>

  <div class="child child-2">
    <h2>Child 2</h2>
  </div>
</div>

.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.

programming css Overlapping CSS z-index Position: sticky z-index Opacity safari CSS online