CSS right property – Cách sử dụng right property trong CSS

CSS right property là một trong bốn thuộc tính offset bao gồm left, top và bottom. Thuộc tính này được sử dụng để xác định khoảng cách giữa phần tử nằm ngang với lề bên phải của khối chứa của nó. Trong bài viết này, chúng ta sẽ tìm hiểu tổng quan về CSS right property, ai sẽ sử dụng nó, cách hoạt động và ưu và nhược điểm của nó.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS right property là gì

Thuộc tính CSS right được sử dụng để chỉ định vị trí của phần tử theo chiều ngang so với lề bên phải của khối chứa của nó. Khi giá trị của cả left và right được xác định, giá trị right sẽ được ưu tiên trong trường hợp khối chứa phải sang trái, và giá trị left sẽ được ưu tiên trong trường hợp khối chứa trái sang phải.

Hiệu quả của thuộc tính này phụ thuộc vào giá trị của thuộc tính position. Giá trị của right không ảnh hưởng khi thuộc tính position được thiết lập thành static. Hiệu ứng của thuộc tính này trên các phần tử được định vị khác ngoài giá trị static được liệt kê như sau:

• Khi phần tử được định vị tuyệt đối hoặc cố định (tức là position: absolute; và position: fixed;), thuộc tính right xác định khoảng cách giữa cạnh phải của phần tử và cạnh phải của khối chứa của nó (tức là khối phụ thuộc mà phần tử được định vị tương đối).
• Nếu phần tử được định vị tương đối (tức là position: relative;), thuộc tính right sẽ thiết lập cạnh phải của phần tử ở bên trái / phải so với vị trí bình thường.
• Nếu position được thiết lập là sticky, tức là position: sticky; thì bối cảnh định vị sẽ là viewport. Khi phần tử nằm trong viewport, thuộc tính right sẽ hoạt động giống như vị trí của nó là tương đối. Khi phần tử nằm bên ngoài, thuộc tính right sẽ hoạt động giống như vị trí của nó là cố định.

Thuộc tính CSS right thường được sử dụng bởi các nhà phát triển web và thiết kế web để xác định vị trí của phần tử trên trang web. Nó rất hữu ích khi bạn muốn đặt một phần tử ở vị trí cụ thể so với khối chứa của nó. Ví dụ, bạn có thể sử dụng nó để đặt một nút “Xem thêm” hoặc một quảng cáo ở cuối trang.

Thuộc tính CSS right được sử dụng để xác định khoảng cách giữa phần tử và lề bên phải của khối chứa của nó. Giá trị của thuộc tính này có thể là:

• auto: Đây là giá trị mặc định và cho phép trình duyệt tính toán vị trí cạnh phải phần tử.
• length: Giá trị này xác định vị trí của thuộc tính right bằng px, cm, pt, vv. Nó cho phép giá trị âm.
• percentage: Giá trị này xác định vị trí của thuộc tính right dưới dạng phần trăm (%). Nó được tính toán theo chiều rộng của khối chứa của phần tử và cũng cho phép giá trị âm.
• initial: Nó thiết lập thuộc tính về giá trị mặc định của nó.
• inherit: Thuộc tính sẽ kế thừa giá trị của phần tử cha.

Hướng dẫn CSS right property

Để sử dụng thuộc tính CSS right, bạn cần chỉ định giá trị của nó trong phần tử HTML của mình. Ví dụ:

<div style="position: absolute; right: 10px;">
    Nội dung phần tử
</div>

Trong ví dụ này, chúng ta đang sử dụng thuộc tính position để đặt phần tử ở vị trí tuyệt đối và thuộc tính right để đưa phần tử 10px từ lề bên phải của khối chứa của nó.

Bạn cũng có thể chỉ định giá trị của thuộc tính này trong tệp CSS của mình:

<div class="my-class">
    Nội dung phần tử
</div>

.my-class {
    position: absolute;
    right: 10px;
}

Trong ví dụ này, chúng ta đang sử dụng lớp my-class để áp dụng các thuộc tính CSS cho phần tử của chúng ta.

Ví dụ CSS right property

CSS right property cho phép bạn chỉ định vị trí ngang của một phần tử được định vị. Nó có thể được sử dụng để di chuyển một phần tử sang trái, sang phải, hoặc bất cứ nơi nào bạn muốn trong luồng tài liệu.

Giá trị mặc định của thuộc tính này là auto, có nghĩa là phần tử sẽ được hiển thị ở vị trí mặc định của nó.

Để di chuyển một phần tử sang phải, bạn có thể sử dụng giá trị dương cho thuộc tính right. Ví dụ:

div {
  position: absolute;
  right: 100px;
}

Ví dụ này sẽ di chuyển phần tử div sang phải 100px so với vị trí hiện tại của nó.

Để di chuyển một phần tử sang trái, bạn có thể sử dụng giá trị âm cho thuộc tính right. Ví dụ:

div {
  position: absolute;
  right: -100px;
}

Ví dụ này sẽ di chuyển phần tử div sang trái 100px so với vị trí hiện tại của nó.

Dưới đây là một số ví dụ khác về cách sử dụng CSS right property:

// Di chuyển một phần tử sang phải 50px
div {
  position: absolute;
  right: 50px;
}

// Di chuyển một phần tử sang trái 100px và sang xuống 20px
div {
  position: absolute;
  right: -100px;
  top: -20px;
}

// Di chuyển một phần tử sang phải 50px và đặt nó theo trung tâm của cửa sổ
div {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateX(-50%);
}

Bạn có thể sử dụng CSS right property để tạo ra các hiệu ứng bố cục thú vị và sáng tạo.

Dưới đây là một số ví dụ cụ thể về cách sử dụng CSS right property:

Để hiển thị một menu ở bên phải màn hình:

nav {
  position: fixed;
  right: 0;
  top: 0;
  width: 200px;
}

Để hiển thị một hình ảnh ở bên phải của một văn bản:

img {
  float: right;
  margin-left: 10px;
}

Để hiển thị một cột văn bản ở bên phải của một cột hình ảnh:

.column-1 {
  float: left;
  width: 50%;
}

.column-2 {
  float: right;
  width: 50%;
}

Để hiển thị một phần tử được định vị theo trung tâm của màn hình, ở bên phải:

div {
  position: absolute;
  right: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Ưu và Nhược điểm CSS right property

Ưu điểm:

• Cho phép xác định vị trí của phần tử theo chiều ngang.
• Có thể sử dụng để đặt các phần tử tại các vị trí cụ thể trong khối chứa của nó.

Nhược điểm:

• Nếu sử dụng sai hoặc không thận trọng, nó có thể gây ra vấn đề về thiết kế trên trang web của bạn.
• Không phù hợp cho việc sử dụng cho những phần tử có nội dung thay đổi liên tục.

Lời khuyên CSS right property

• Sử dụng thuộc tính CSS right chỉ khi cần thiết.
• Luôn kiểm tra hiệu quả của thuộc tính trước khi triển khai trên trang web của bạn.
• Hãy chắc chắn rằng giá trị của right được xác định chính xác để đảm bảo rằng phần tử được đặt ở vị trí chính xác.
• Tránh sử dụng giá trị âm cho thuộc tính right nếu không cần thiết.