Hướng dẫn css overlapping images without absolute - hình ảnh chồng chéo css mà không có tuyệt đối

Question

Đây là cách để lớp 2 hình ảnh và giữa hình ảnh thứ hai.

Nội dung chính Show

Tại sao không làm cho vị trí Div: Tuyệt đối?
Cách sạch hơn!
Giải pháp sử dụng lưới
Sự kết luận
Tôi có thể sử dụng gì thay vì vị trí tuyệt đối?
Tại sao hình ảnh của tôi chồng chéo CSS?
Có tệ khi sử dụng CSS định vị tuyệt đối không?
Bạn có thể lớp hình ảnh trong CSS không?

Lưu ý: "Vị trí: Tuyệt đối" trong "Image2" chỉ được sử dụng để hình ảnh có thể chồng lên nhau. Nó vẫn sẽ tập trung vào hình ảnh của bạn một cách đáp ứng / mà không cần sử dụng "trái:" hoặc "phải:" hoặc lề, và độc lập với kích thước hình ảnh.

HTML:


<div class="page-container">

    <div class="images-container">
        <img class="image1" src="YOURIMAGEURLHERE" />

        <div class="image2container">
            <img class="image2" src="SECONDIMAGEURLGOESHERE" />
        </div>
    </div>
</div>

CSS:

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}
  

.images-container {
   position: relative;
   top: 0;
   left: 0;
   background-position: center;
   background-repeat: no-repeat;     
}
      
.image1 {
    position: relative;
    top: 0;
    left: 0;

    //if you want to blur the outer image
    //transform: scale(1.1); 
    //filter: blur(20px);
    //-webkit-filter: blur(20px);
    height: 100vh;
    width: 100vw;
}

.image2container {
   display: flex; 
   flex-direction: row;
   align-items: center;
   justify-content: center;
}

.image2 {
   position: absolute;
   top: 0px;
}


.page-container{ 

}

SCSS (nếu bạn thích nó, mà tôi làm - giúp sao chép các kiểu từ 1 tệp khác hơn nhiều)


body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}

.page-container {
    .images-container{
        position: relative;
        top: 0;
        left: 0;
        background-position: center;
        background-repeat: no-repeat;
        .image1 {
            position: relative;
            top: 0;
            left: 0;

            //if you want to blur the outer image
            //transform: scale(1.1); 
            //filter: blur(20px);
            //-webkit-filter: blur(20px);
            height: 100vh;
            width: 100vw;
          }
        .image2container {
            display: flex; 
            flex-direction: row;
            align-items: center;
            justify-content: center;
            .image2 {
                position: absolute;
                top: 0px;
            }
        }
    }
}

Một nhiệm vụ phổ biến trong khi tạo kiểu HTML là phủ hai div. Công việc có thể phủ lên một số văn bản trên một hình ảnh, hoặc bật một phương thức trên đỉnh của lớp phủ. Trong bài đăng này, chúng tôi sẽ đề cập đến cách hoàn thành lớp phủ hai div mà không cần phải sử dụng position:absolute.

Tại sao không làm cho vị trí Div: Tuyệt đối?

Đầu tiên, tôi muốn làm rõ rằng sử dụng position:absolute hoàn toàn được chấp nhận để hoàn thành nhiệm vụ phủ hai div. Chủ đề này thường được đưa lên bởi vì khi định vị một phần tử với position:absolute, nó sẽ loại bỏ phần tử khỏi luồng tự nhiên của tài liệu, điều này có thể khiến nó trở nên khó khăn để quản lý. Tuy nhiên, nó không có nghĩa là sai của nó bằng bất kỳ phương tiện nào.

Cách sạch hơn!

Trong đoạn văn trên, tôi đã tuyên bố rằng việc sử dụng position:absolute để phủ hai divs, nhưng điều đó cũng không sai là vì nó không sai có nghĩa là nó đã giành chiến thắng khi bạn muốn tắm sau khi sử dụng nó. OK, nó không tệ lắm, nhưng có một cách sạch hơn! Hãy xem cách hoàn thành công việc với hệ thống bố trí lưới CSS mới mạnh mẽ tuyệt vời.

Thí dụ

Dưới đây là một ví dụ khi bạn sẽ phải phủ hai div. Ví dụ là một biểu ngữ anh hùng với tiêu đề và hình ảnh sản phẩm. Các yêu cầu là nó cần phải đáp ứng và cho phép tiêu đề phủ lên hình ảnh ở kích thước màn hình nhỏ hơn.

Giải pháp sử dụng lưới

Trước khi bố cục lưới xuất hiện, hầu hết mọi người sẽ đặt div phải thành

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}
  

.images-container {
   position: relative;
   top: 0;
   left: 0;
   background-position: center;
   background-repeat: no-repeat;     
}
      
.image1 {
    position: relative;
    top: 0;
    left: 0;

    //if you want to blur the outer image
    //transform: scale(1.1); 
    //filter: blur(20px);
    //-webkit-filter: blur(20px);
    height: 100vh;
    width: 100vw;
}

.image2container {
   display: flex; 
   flex-direction: row;
   align-items: center;
   justify-content: center;
}

.image2 {
   position: absolute;
   top: 0px;
}


.page-container{ 

}

1, đưa div ra khỏi luồng tài liệu và yêu cầu phần tử bên trái phải bỏ qua vị trí của phần tử bên phải. Với Grid, bạn có thể gán các div để sống trên cùng một cột và hàng, dẫn đến cùng một hiệu ứng trong khi vẫn giữ cả hai phần tử trong luồng tài liệu tự nhiên. Hãy cùng xem mã.

HTML

<div class="container">
  <div class="left-content">
    <h2>YJ conversion kit! Get your kit now!</h2>
    <div class="cta-button">More Info</div>
  </div>
  <div class="product-image"></div>
</div>

Trên đây là HTML cho biểu ngữ anh hùng của chúng tôi. Chúng tôi có một thùng chứa với hai div khi còn nhỏ. Yếu tố với lớp

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}
  

.images-container {
   position: relative;
   top: 0;
   left: 0;
   background-position: center;
   background-repeat: no-repeat;     
}
      
.image1 {
    position: relative;
    top: 0;
    left: 0;

    //if you want to blur the outer image
    //transform: scale(1.1); 
    //filter: blur(20px);
    //-webkit-filter: blur(20px);
    height: 100vh;
    width: 100vw;
}

.image2container {
   display: flex; 
   flex-direction: row;
   align-items: center;
   justify-content: center;
}

.image2 {
   position: absolute;
   top: 0px;
}


.page-container{ 

}

2 sẽ kết thúc tiêu đề của chúng tôi và gọi nút hành động, phần tử với lớp

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}
  

.images-container {
   position: relative;
   top: 0;
   left: 0;
   background-position: center;
   background-repeat: no-repeat;     
}
      
.image1 {
    position: relative;
    top: 0;
    left: 0;

    //if you want to blur the outer image
    //transform: scale(1.1); 
    //filter: blur(20px);
    //-webkit-filter: blur(20px);
    height: 100vh;
    width: 100vw;
}

.image2container {
   display: flex; 
   flex-direction: row;
   align-items: center;
   justify-content: center;
}

.image2 {
   position: absolute;
   top: 0px;
}


.page-container{ 

}

3 sẽ chứa, bạn đoán nó, hình ảnh sản phẩm của chúng tôi.

CSS

Điều đầu tiên chúng ta cần làm là cung cấp cho container gói tất cả các yếu tố thuộc tính của

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}
  

.images-container {
   position: relative;
   top: 0;
   left: 0;
   background-position: center;
   background-repeat: no-repeat;     
}
      
.image1 {
    position: relative;
    top: 0;
    left: 0;

    //if you want to blur the outer image
    //transform: scale(1.1); 
    //filter: blur(20px);
    //-webkit-filter: blur(20px);
    height: 100vh;
    width: 100vw;
}

.image2container {
   display: flex; 
   flex-direction: row;
   align-items: center;
   justify-content: center;
}

.image2 {
   position: absolute;
   top: 0px;
}


.page-container{ 

}

4, điều này sẽ cho phép chúng ta áp dụng tất cả các phong cách cần thiết khác cho trẻ em để thực hiện hiệu ứng phủ. Tiếp theo, chúng ta phải xác định các cột và hàng lưới. Chúng tôi có thể làm điều này bằng cách sử dụng

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}
  

.images-container {
   position: relative;
   top: 0;
   left: 0;
   background-position: center;
   background-repeat: no-repeat;     
}
      
.image1 {
    position: relative;
    top: 0;
    left: 0;

    //if you want to blur the outer image
    //transform: scale(1.1); 
    //filter: blur(20px);
    //-webkit-filter: blur(20px);
    height: 100vh;
    width: 100vw;
}

.image2container {
   display: flex; 
   flex-direction: row;
   align-items: center;
   justify-content: center;
}

.image2 {
   position: absolute;
   top: 0px;
}


.page-container{ 

}

5 và

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}
  

.images-container {
   position: relative;
   top: 0;
   left: 0;
   background-position: center;
   background-repeat: no-repeat;     
}
      
.image1 {
    position: relative;
    top: 0;
    left: 0;

    //if you want to blur the outer image
    //transform: scale(1.1); 
    //filter: blur(20px);
    //-webkit-filter: blur(20px);
    height: 100vh;
    width: 100vw;
}

.image2container {
   display: flex; 
   flex-direction: row;
   align-items: center;
   justify-content: center;
}

.image2 {
   position: absolute;
   top: 0px;
}


.page-container{ 

}

6 Trong ví dụ này, chúng tôi sẽ sử dụng bố cục cột 4 với một hàng. Để thực hiện phản hồi này, chúng tôi có thể sử dụng tốc ký

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}
  

.images-container {
   position: relative;
   top: 0;
   left: 0;
   background-position: center;
   background-repeat: no-repeat;     
}
      
.image1 {
    position: relative;
    top: 0;
    left: 0;

    //if you want to blur the outer image
    //transform: scale(1.1); 
    //filter: blur(20px);
    //-webkit-filter: blur(20px);
    height: 100vh;
    width: 100vw;
}

.image2container {
   display: flex; 
   flex-direction: row;
   align-items: center;
   justify-content: center;
}

.image2 {
   position: absolute;
   top: 0px;
}


.page-container{ 

}

7 để tuyên bố rằng bạn muốn tất cả các cột của mình chiếm không gian có sẵn trong container. Sau đó, chúng tôi sẽ xác định các hàng lưới. Với ví dụ này, chúng tôi chỉ muốn một hàng.

.container {
  display: grid;
  grid-template-columns: 1fr 1 fr 1fr 1fr;
  grid-template-rows: 1fr;
  height: 300px;
}

Các CSS trên sẽ cung cấp cho chúng tôi các cột và hàng của chúng tôi.

Tiếp theo, hãy để định vị các yếu tố của chúng tôi bên trong container. Đầu tiên, chúng tôi sẽ nhắm mục tiêu lớp

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}
  

.images-container {
   position: relative;
   top: 0;
   left: 0;
   background-position: center;
   background-repeat: no-repeat;     
}
      
.image1 {
    position: relative;
    top: 0;
    left: 0;

    //if you want to blur the outer image
    //transform: scale(1.1); 
    //filter: blur(20px);
    //-webkit-filter: blur(20px);
    height: 100vh;
    width: 100vw;
}

.image2container {
   display: flex; 
   flex-direction: row;
   align-items: center;
   justify-content: center;
}

.image2 {
   position: absolute;
   top: 0px;
}


.page-container{ 

}

2. Thay vì cung cấp cho phần tử một chiều rộng, chúng ta cần xác định những hàng và cột chúng ta muốn phần tử này trải dài trên. Cách chúng ta có thể làm điều này là bằng cách sử dụng

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}
  

.images-container {
   position: relative;
   top: 0;
   left: 0;
   background-position: center;
   background-repeat: no-repeat;     
}
      
.image1 {
    position: relative;
    top: 0;
    left: 0;

    //if you want to blur the outer image
    //transform: scale(1.1); 
    //filter: blur(20px);
    //-webkit-filter: blur(20px);
    height: 100vh;
    width: 100vw;
}

.image2container {
   display: flex; 
   flex-direction: row;
   align-items: center;
   justify-content: center;
}

.image2 {
   position: absolute;
   top: 0px;
}


.page-container{ 

}

9,


body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}

.page-container {
    .images-container{
        position: relative;
        top: 0;
        left: 0;
        background-position: center;
        background-repeat: no-repeat;
        .image1 {
            position: relative;
            top: 0;
            left: 0;

            //if you want to blur the outer image
            //transform: scale(1.1); 
            //filter: blur(20px);
            //-webkit-filter: blur(20px);
            height: 100vh;
            width: 100vw;
          }
        .image2container {
            display: flex; 
            flex-direction: row;
            align-items: center;
            justify-content: center;
            .image2 {
                position: absolute;
                top: 0px;
            }
        }
    }
}

0,


body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}

.page-container {
    .images-container{
        position: relative;
        top: 0;
        left: 0;
        background-position: center;
        background-repeat: no-repeat;
        .image1 {
            position: relative;
            top: 0;
            left: 0;

            //if you want to blur the outer image
            //transform: scale(1.1); 
            //filter: blur(20px);
            //-webkit-filter: blur(20px);
            height: 100vh;
            width: 100vw;
          }
        .image2container {
            display: flex; 
            flex-direction: row;
            align-items: center;
            justify-content: center;
            .image2 {
                position: absolute;
                top: 0px;
            }
        }
    }
}

1 và


body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}

.page-container {
    .images-container{
        position: relative;
        top: 0;
        left: 0;
        background-position: center;
        background-repeat: no-repeat;
        .image1 {
            position: relative;
            top: 0;
            left: 0;

            //if you want to blur the outer image
            //transform: scale(1.1); 
            //filter: blur(20px);
            //-webkit-filter: blur(20px);
            height: 100vh;
            width: 100vw;
          }
        .image2container {
            display: flex; 
            flex-direction: row;
            align-items: center;
            justify-content: center;
            .image2 {
                position: absolute;
                top: 0px;
            }
        }
    }
}

2.

.left-content {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  z-index: 2;
  padding-left: 16px;
}

Hãy phá vỡ các CSS trên. Bằng cách đặt

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}
  

.images-container {
   position: relative;
   top: 0;
   left: 0;
   background-position: center;
   background-repeat: no-repeat;     
}
      
.image1 {
    position: relative;
    top: 0;
    left: 0;

    //if you want to blur the outer image
    //transform: scale(1.1); 
    //filter: blur(20px);
    //-webkit-filter: blur(20px);
    height: 100vh;
    width: 100vw;
}

.image2container {
   display: flex; 
   flex-direction: row;
   align-items: center;
   justify-content: center;
}

.image2 {
   position: absolute;
   top: 0px;
}


.page-container{ 

}

9 thành 1 và


body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}

.page-container {
    .images-container{
        position: relative;
        top: 0;
        left: 0;
        background-position: center;
        background-repeat: no-repeat;
        .image1 {
            position: relative;
            top: 0;
            left: 0;

            //if you want to blur the outer image
            //transform: scale(1.1); 
            //filter: blur(20px);
            //-webkit-filter: blur(20px);
            height: 100vh;
            width: 100vw;
          }
        .image2container {
            display: flex; 
            flex-direction: row;
            align-items: center;
            justify-content: center;
            .image2 {
                position: absolute;
                top: 0px;
            }
        }
    }
}

4 đến 3, chúng tôi đang nói rằng chúng tôi muốn phần tử này trải dài trên cột 1 đến đầu cột 3. Vì vậy, về cơ bản 50% container. Bạn có thể hỏi, tại sao xác định


body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}

.page-container {
    .images-container{
        position: relative;
        top: 0;
        left: 0;
        background-position: center;
        background-repeat: no-repeat;
        .image1 {
            position: relative;
            top: 0;
            left: 0;

            //if you want to blur the outer image
            //transform: scale(1.1); 
            //filter: blur(20px);
            //-webkit-filter: blur(20px);
            height: 100vh;
            width: 100vw;
          }
        .image2container {
            display: flex; 
            flex-direction: row;
            align-items: center;
            justify-content: center;
            .image2 {
                position: absolute;
                top: 0px;
            }
        }
    }
}

1 nếu bạn chỉ có 1 hàng? Chúng tôi phải xác định


body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}

.page-container {
    .images-container{
        position: relative;
        top: 0;
        left: 0;
        background-position: center;
        background-repeat: no-repeat;
        .image1 {
            position: relative;
            top: 0;
            left: 0;

            //if you want to blur the outer image
            //transform: scale(1.1); 
            //filter: blur(20px);
            //-webkit-filter: blur(20px);
            height: 100vh;
            width: 100vw;
          }
        .image2container {
            display: flex; 
            flex-direction: row;
            align-items: center;
            justify-content: center;
            .image2 {
                position: absolute;
                top: 0px;
            }
        }
    }
}

1 vì trình duyệt sẽ tự động tạo các hàng mới và tự động đặt từng phần tử trên hàng đó. Xác định cả hai phần tử thành


body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}

.page-container {
    .images-container{
        position: relative;
        top: 0;
        left: 0;
        background-position: center;
        background-repeat: no-repeat;
        .image1 {
            position: relative;
            top: 0;
            left: 0;

            //if you want to blur the outer image
            //transform: scale(1.1); 
            //filter: blur(20px);
            //-webkit-filter: blur(20px);
            height: 100vh;
            width: 100vw;
          }
        .image2container {
            display: flex; 
            flex-direction: row;
            align-items: center;
            justify-content: center;
            .image2 {
                position: absolute;
                top: 0px;
            }
        }
    }
}

7 sẽ buộc hai yếu tố phải ở cùng một hàng.

Tiếp theo, hãy để định vị hình ảnh sản phẩm của chúng tôi.

.product-image {
  grid-column-start: 2;
  grid-column-end: 5;
  grid-row-start: 1;
  background-image: url('./src/example-image.png');
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
}

Vì vậy, đây là nơi mà phép thuật xảy ra. Bằng cách đặt phần tử này thành

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}
  

.images-container {
   position: relative;
   top: 0;
   left: 0;
   background-position: center;
   background-repeat: no-repeat;     
}
      
.image1 {
    position: relative;
    top: 0;
    left: 0;

    //if you want to blur the outer image
    //transform: scale(1.1); 
    //filter: blur(20px);
    //-webkit-filter: blur(20px);
    height: 100vh;
    width: 100vw;
}

.image2container {
   display: flex; 
   flex-direction: row;
   align-items: center;
   justify-content: center;
}

.image2 {
   position: absolute;
   top: 0px;
}


.page-container{ 

}

9 thành 2, chúng tôi đang gán div này cho một trong cùng các cột với phần tử đầu tiên, cho phép hiệu ứng chồng chéo diễn ra mà không cần sử dụng tuyệt đối.

Sự kết luận

Để tóm tắt lại, tất cả những gì chúng ta phải làm là xác định hàng và cột để bắt đầu và kết thúc. Sau đó, Div sẽ tự động trải dài trên các cột và hàng lưới được xác định. Vì chúng tôi chỉ có một hàng, chúng tôi không đặt


body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}

.page-container {
    .images-container{
        position: relative;
        top: 0;
        left: 0;
        background-position: center;
        background-repeat: no-repeat;
        .image1 {
            position: relative;
            top: 0;
            left: 0;

            //if you want to blur the outer image
            //transform: scale(1.1); 
            //filter: blur(20px);
            //-webkit-filter: blur(20px);
            height: 100vh;
            width: 100vw;
          }
        .image2container {
            display: flex; 
            flex-direction: row;
            align-items: center;
            justify-content: center;
            .image2 {
                position: absolute;
                top: 0px;
            }
        }
    }
}

2, nhưng chúng tôi vẫn phải xác định


body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}

.page-container {
    .images-container{
        position: relative;
        top: 0;
        left: 0;
        background-position: center;
        background-repeat: no-repeat;
        .image1 {
            position: relative;
            top: 0;
            left: 0;

            //if you want to blur the outer image
            //transform: scale(1.1); 
            //filter: blur(20px);
            //-webkit-filter: blur(20px);
            height: 100vh;
            width: 100vw;
          }
        .image2container {
            display: flex; 
            flex-direction: row;
            align-items: center;
            justify-content: center;
            .image2 {
                position: absolute;
                top: 0px;
            }
        }
    }
}

2 hoặc trình duyệt sẽ tự động tạo nhiều hàng một cách linh hoạt. Tôi hy vọng bạn thích bài viết này về cách chồng chéo hai div bằng hệ thống bố cục lưới mới!

Chơi với mã ở đây!

Tôi có thể sử dụng gì thay vì vị trí tuyệt đối?

Chúng ta có thể sử dụng định vị tuyệt đối CSS để chồng chéo các yếu tố, nhưng thay vào đó, có một số lợi thế để sử dụng lưới CSS.Hãy khám phá bằng cách sử dụng lưới CSS thay thế cho vị trí tuyệt đối.CSS grid instead. Let's explore using CSS grid as an alternative to position absolute.

Tại sao hình ảnh của tôi chồng chéo CSS?

Nếu phần tử vị trí tuyệt đối cao hơn hình ảnh tĩnh (trên cùng), nội dung sau sẽ chồng lên các hình ảnh.Điều này là do chiều cao của hình ảnh vị trí tuyệt đối không được nhận ra vì nó nằm ngoài luồng tài liệu, (một hành vi bình thường cho một phần tử định vị tuyệt đối)., the following content will overlap the images. This is due to the height of the absolute-positioned image which is not recognized since it's out of the document flow, (a normal behavior for an absolute positioned element).

Có tệ khi sử dụng CSS định vị tuyệt đối không?

Không có gì sai khi sử dụng vị trí: Tuyệt đối trong ví dụ trên, nhưng tại sao không sử dụng một giải pháp dễ dàng hơn?Hãy khám phá điều đó.Bước đầu tiên là thêm hiển thị: lưới vào thành phần thẻ.Chúng tôi không cần đặt bất kỳ cột hoặc hàng nào. in the above example, but why not use an easier solution? Let's explore that. The first step is to add display: grid to the card component. We don't need to set any columns or rows.