Hướng dẫn z-index trong bootstrap - z-index trong bootstrap

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người. Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất. Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook Facebook

1- Tổng quan về Bootstrap Position

Bootstrap xây dựng sẵn một vài lớp tiện ích để thiết lập vị trí (Position) cho phần tử: xây dựng sẵn một vài lớp tiện ích để thiết lập vị trí (Position) cho phần tử:

• .position-static
• .position-relative
• .position-absolute
• .position-fixed
• .position-sticky

Thay vì sử dụng các lớp ở trên bạn có thể sử dụng Css property dưới đây để có cùng một kết quả: Css property dưới đây để có cùng một kết quả:

• style="position:static""position:static"
• style="position:relative""position:relative"
• style="position:absolute""position:absolute"
• style="position:fixed""position:fixed"
• style="position:sticky""position:sticky"

Ngoài ra, một vài lớp khác cũng rất hữu ích, mà bạn dễ dàng hiểu được mục đích của nó:

• .fixed-top
• .fixed-bottom
• .sticky-top

2- Class .position-static

Các phần tử trong HTML được định vị tĩnh (Positioned static) theo mặc định, điều đó có nghĩa là vị trí của nó được xác định theo quy tắc thông thường của trang. Nó không bị ảnh hưởng bởi các Css property: left, right, top, bottom nếu bạn cố tình thiết lập cho nó. HTML được định vị tĩnh (Positioned static) theo mặc định, điều đó có nghĩa là vị trí của nó được xác định theo quy tắc thông thường của trang. Nó không bị ảnh hưởng bởi các Css property: left, right, top, bottom nếu bạn cố tình thiết lập cho nó.

Chú ý: Thay vì sử dụng lớp .position-static của Bootstrap, bạn có thể sử dụng Css property (position: static) để được kết quả tương tự. Thay vì sử dụng lớp .position-static của Bootstrap, bạn có thể sử dụng Css property (position: static) để được kết quả tương tự.

positon-static-example

   
.position-static
   

      This div element has position: static;
   
   

   
.position-static + style: left:50px
   

      This div element has position: static;
   

3- Class .position-relative

Một phần tử được áp dụng lớp .position-relative cũng giống như nó được áp dụng Css property (postion: relative). Điều đó có nghĩa là nó sẽ được định vị tương đối (positioned relative) so với vị trí thông thường của nó. Hay nói cách khác bạn có thể sử dụng Css property (left, right, top, bottom) để điều chỉnh (dịch chuyển) vị trí bên trái, bên phải, bên trên, bên dưới so với vị trí thông thường của nó. .position-relative cũng giống như nó được áp dụng Css property (postion: relative). Điều đó có nghĩa là nó sẽ được định vị tương đối (positioned relative) so với vị trí thông thường của nó. Hay nói cách khác bạn có thể sử dụng Css property (left, right, top, bottom) để điều chỉnh (dịch chuyển) vị trí bên trái, bên phải, bên trên, bên dưới so với vị trí thông thường của nó.

position-relative-example.html

   
.position-relative
   

      .position-relative (width:450px)
   
   

   
.position-relative + style (left:50px; top:50px;)
   

      .position-relative (width:450px; left:50px; top:50px;)
   

4- Class .position-fixed

Một phần tử được áp dụng lớp .position-fixed cũng giống như nó được áp dụng Css property (position: fixed). Điều đó có nghĩa là nó sẽ được định vị tương đối (positioned relative) so với khung nhìn (viewport) của trình duyệt. .position-fixed cũng giống như nó được áp dụng Css property (position: fixed). Điều đó có nghĩa là nó sẽ được định vị tương đối (positioned relative) so với khung nhìn (viewport) của trình duyệt.

Vi dụ dưới đây, một phần tử được cố định với bên dưới (bottom) và bên phải (right) của khung nhìn (viewport):

position-fixed-example

   
.position-fixed
   

      .position-fixed (bottom:10px; right:5px;)
   
   
Info.. 1
   
Info.. 2
   
Info.. 3
   
Info.. 4
   
Info.. 5

Một đặc điểm đặc biệt của phần tử với {position: fixed} là bạn có thể neo (anchor) cố định 4 cạnh của nó với 4 cạnh của khung nhìn (viewport) của trình duyệt. Trong trường hợp đó, nếu kích thước của viewport thay đổi, kích thước của phần tử này cũng thay đổi theo. Nó giống như hình minh họa dưới đây: {position: fixed} là bạn có thể neo (anchor) cố định 4 cạnh của nó với 4 cạnh của khung nhìn (viewport) của trình duyệt. Trong trường hợp đó, nếu kích thước của viewport thay đổi, kích thước của phần tử này cũng thay đổi theo. Nó giống như hình minh họa dưới đây:

position-fixed-example2

   
.position-fixed

   

      .position-fixed 


      (bottom:40px;right:35px;top: 100px;left:150px;)
   

   
Info.. 1
   
Info.. 2
   
Info.. 3
   
Info.. 4
   
Info.. 5

5- Class .position-absolute

Phần tử được áp dụng lớp .position-absolute (Vị trí tuyệt đối) sẽ tìm kiếm phần tử tổ tiên (cha, ông,..) gần nhất của nó mà phần tử này có {position: relative}. Sau khi tìm thấy nó sẽ thiết lập vị trí tương đối so với phần tử này. Nếu không tìm thấy nó sẽ thiết lập vị trí tương đối so với khung nhìn (Viewport) của trình duyệt. .position-absolute (Vị trí tuyệt đối) sẽ tìm kiếm phần tử tổ tiên (cha, ông,..) gần nhất của nó mà phần tử này có {position: relative}. Sau khi tìm thấy nó sẽ thiết lập vị trí tương đối so với phần tử này. Nếu không tìm thấy nó sẽ thiết lập vị trí tương đối so với khung nhìn (Viewport) của trình duyệt.

position-absolute-example

   
.position-absolute example

   

      .position-relative

      

         .position-absolute (bottom:10px; right:15px;)
      

   

position-absolute-example2

   
.position-absolute example

   

      .position-relative
      

         .position-absolute (bottom:40px;right:35px;top: 100px;left:150px;)
      
   

6- Class .position-sticky

Một phần tử được áp dụng lớp .position-sticky cũng giống như nó được áp dụng Css property (position: sticky). Vị trí của nó dựa trên vị trí cuộn (scoll position) của người dùng. .position-sticky cũng giống như nó được áp dụng Css property (position: sticky). Vị trí của nó dựa trên vị trí cuộn (scoll position) của người dùng.

Phần tử Sticky sẽ chuyển đổi từ "relative" sang "fixed" hoặc ngược lại phụ thuộc vào vị trí cuộn của người dùng. Sticky sẽ chuyển đổi từ "relative" sang "fixed" hoặc ngược lại phụ thuộc vào vị trí cuộn của người dùng.

Chú ý: Trình duyệt IE/Edge phiên bản 15 hoặc cũ hơn không hỗ trợ {position: sticky}. IE/Edge phiên bản 15 hoặc cũ hơn không hỗ trợ {position: sticky}.

position-sticky-example.html

   
      
      
      
   
   
      

         
.position-sticky example
         

         Try to scroll inside this frame to understand how sticky positioning works.
         

            Note: IE/Edge 15 and earlier versions do not support sticky position.
            I am sticky!
         
         

            .position-sticky (top:5px;)
         

         

            Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum,
            altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum.
            Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
         

         

            Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum,
            altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum.
            Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
         

         

            Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum,
            altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum.
            Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
         
      
      
      
      
   

7- Class .fixed-top, fixed-bottom, .sticky-top

Lớp .fixed-top được áp dụng cho phần tử để cố định nó vào phía trên khung nhìn (viewport) của trình duyệt. (Xem thêm giải thích tại mục .position-fixed) .fixed-top được áp dụng cho phần tử để cố định nó vào phía trên khung nhìn (viewport) của trình duyệt. (Xem thêm giải thích tại mục .position-fixed)

.fixed-top (Bootstrap code)

.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}
 

Lớp .fixed-bottom được áp dụng cho phần tử để cố định nó vào phía dưới khung nhìn (viewport) của trình duyệt. (Xem thêm giải thích tại mục .position-fixed) .fixed-bottom được áp dụng cho phần tử để cố định nó vào phía dưới khung nhìn (viewport) của trình duyệt. (Xem thêm giải thích tại mục .position-fixed)

.fixed-bottom (Bootstrap Code)

.fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
}

.sticky-top

Lớp .sticky-top khá giống với .position-sticky, bạn có thể xem thêm giải thích tại mục .position-sticky. .sticky-top khá giống với .position-sticky, bạn có thể xem thêm giải thích tại mục .position-sticky.

.sticky-top (Bootstrap Code)

.sticky-top {
    position: -webkit-sticky; /* Safari Browser */
    position: sticky;
    top: 0;
    z-index: 1020;
}