Những bài học
Bắt đầu
Bắt đầu học
CodeGym /Các khóa học /Frontend SELF VI /Định vị tương đối

Định vị tương đối

Frontend SELF VI
Mức độ , Bài học
Có sẵn

3.1 position: relative

Định vị tương đối trong CSS cho phép các phần tử di chuyển so với vị trí ban đầu của chúng trong luồng tài liệu. Khi sử dụng position: relative phần tử giữ nguyên vị trí của mình trong luồng bình thường, nhưng có thể di chuyển nó bằng các thuộc tính top, right, bottom và left. Các thuộc tính này cho phép đẩy phần tử so với vị trí thường của nó.

Nguyên tắc cơ bản của định vị tương đối

Với định vị tương đối (position: relative) phần tử được di chuyển khỏi vị trí ban đầu của nó trong luồng tài liệu. Di chuyển này chỉ ảnh hưởng đến chính phần tử, còn các phần tử khác vẫn ở vị trí của chúng, như thể phần tử không bị di chuyển. Điều này cho phép tạo ra các hiệu ứng mà các phần tử chồng lên nhau hoặc tạo các khoảng trống thị giác bổ sung.

Cú pháp:

    
      .element {
        position: relative;
        top: value;
        right: value;
        bottom: value;
        left: value;
      }

Nơi:

  • top: đẩy phần tử xuống so với vị trí bình thường của nó
  • right: đẩy phần tử sang trái so với vị trí bình thường của nó
  • bottom: đẩy phần tử lên so với vị trí bình thường của nó
  • left: đẩy phần tử sang phải so với vị trí bình thường của nó
  • <value>: có thể là bất kỳ giá trị độ dài hợp lệ nào trong CSS (px, %, em v.v.)

3.2 Thuộc tính top

Thuộc tính top đẩy phần tử xuống so với vị trí ban đầu của nó.

Ví dụ sử dụng top:

CSS 
    
      .relative-top {
        position: relative;
        top: 20px; /* Đẩy phần tử xuống 20 pixel */
      }

Ví dụ sử dụng:

CSS 
    
      .container {
        min-height: 200px;
      }

      .box {
        padding: 20px;
      }

      .static-box {
        background-color: lightgray;
      }

      .relative-top {
        position: relative;
        top: 20px;
        background-color: lightblue;
      }
HTML 
    
      <div class="container">
        <div class="box static-box">Đây là một khối thông thường</div>
        <div class="box relative-top">Khối này sẽ được đẩy xuống 20px.</div>
        <div class="box static-box">Đây là một khối thông thường</div>
      </div>

3.3 Thuộc tính right

Thuộc tính right đẩy phần tử sang trái so với vị trí ban đầu của nó.

Ví dụ sử dụng right:

CSS 
    
      .relative-right {
        position: relative;
        right: 20px; /* Đẩy phần tử sang trái 20 pixel */
      }

Ví dụ sử dụng:

CSS 
    
      .container {
        min-height: 200px;
      }

      .box {
        padding: 20px;
      }

      .static-box {
        background-color: lightgray;
      }

      .relative-right {
        position: relative;
        right: 20px;
        background-color: lightgreen;
        padding: 20px;
      }
HTML 
    
      <div class="container">
        <div class="box static-box">Đây là một khối thông thường</div>
        <div class="box relative-right">Khối này sẽ được đẩy sang trái 20px.</div>
        <div class="box static-box">Đây là một khối thông thường</div>
      </div>

3.4 Thuộc tính bottom

Thuộc tính bottom đẩy phần tử lên trên so với vị trí ban đầu của nó.

Ví dụ sử dụng bottom:

CSS 
    
      .relative-bottom {
        position: relative;
        bottom: 20px; /* Đẩy phần tử lên 20 pixel */
      }

Ví dụ sử dụng:

CSS 
    
      .container {
        min-height: 200px;
      }

      .box {
        padding: 20px;
      }

      .static-box {
        background-color: lightgray;
      }

      .relative-bottom {
        position: relative;
        bottom: 20px;
        background-color: lightcoral;
        padding: 20px;
      }
HTML 
    
      <div class="container">
        <div class="box static-box">Đây là một khối thông thường</div>
        <div class="box relative-bottom">Khối này sẽ được đẩy lên 20px.</div>
        <div class="box static-box">Đây là một khối thông thường</div>
      </div>

3.5 Thuộc tính left

Thuộc tính left đẩy phần tử sang phải so với vị trí ban đầu của nó.

Ví dụ sử dụng left:

CSS 
    
      .relative-left {
        position: relative;
        left: 20px; /* Đẩy phần tử sang phải 20 pixel */
      }

Ví dụ sử dụng:

CSS 
    
      .container {
        min-height: 200px;
      }

      .box {
        padding: 20px;
      }

      .static-box {
        background-color: lightgray;
      }

      .relative-left {
        position: relative;
        left: 20px;
        background-color: lightgoldenrodyellow;
        padding: 20px;
      }
HTML 
    
      <div class="container">
        <div class="box static-box">Đây là một khối thông thường</div>
        <div class="box relative-left">Khối này sẽ được đẩy sang phải 20px.</div>
        <div class="box static-box">Đây là một khối thông thường</div>
      </div>

3.6 Tương tác với các phần tử liền kề

Các phần tử với position: relative vẫn ở trong luồng tài liệu bình thường, có nghĩa là chúng vẫn chiếm không gian sẽ được chiếm giữ nếu chúng không bị di chuyển. Điều này cho phép di chuyển các phần tử mà không thay đổi vị trí các phần tử khác trên trang.

Ví dụ sử dụng:

CSS 
    
      .container {
        border: 2px solid #000;
        padding: 10px;
      }

      .box {
        position: relative;
        background-color: #e74c3c;
        color: white;
        padding: 20px;
        margin: 10px;
        width: 200px;
      }

      .box1 {
        top: 20px;
      }

      .box2 {
        left: 20px;
      }
HTML 
    
      <div class="container">
        <div class="box box1">Phần tử 1 (đẩy xuống)</div>
        <div class="box box2">Phần tử 2 (đẩy sang phải)</div>
        <div class="box">Phần tử 3 (vị trí bình thường)</div>
      </div>

Giải thích mã:

  • .box1: phần tử bị đẩy xuống 20 pixel, nhưng vị trí của nó trong luồng bình thường vẫn còn, điều này có nghĩa là, các phần tử khác sẽ được định vị so với vị trí ban đầu của nó
  • .box2: phần tử bị đẩy sang phải 20 pixel, nhưng vị trí của nó trong luồng bình thường vẫn còn
Bình luận
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION