👉 CSS right Property — Positioning Elements from the Right Edge

The CSS right property helps you move an element horizontally from the right side of its containing block. It’s mainly used with positioned elements (relative, absolute, fixed, or sticky) to control their placement.

---

🔹 What is the right Property?

• The right property specifies the distance between the right edge of the element and the right edge of its containing block.
• It works only on elements with position set to something other than static (the default).

---

📘 Syntax

selector {
  right: length | percentage | auto;
}

• length — e.g., 10px, 2em, 5% (distance from right edge)
• percentage — relative to the containing block’s width
• auto — default, lets the browser decide positioning

---

🧩 How it Works

• With position: absolute or fixed, right moves the element inward from the right edge of its positioned ancestor or viewport.
• With position: relative, right shifts the element leftwards by that amount from its normal position.
• Does nothing with position: static.

---

✍️ Examples

1. Absolutely positioned box from the right edge:

.box {
  position: absolute;
  top: 20px;
  right: 30px;
  width: 100px;
  height: 100px;
  background-color: coral;
}

The .box is placed 30px from the right edge of its nearest positioned ancestor.

---

2. Relatively positioned element shifted left by right value:

.relative-box {
  position: relative;
  right: 20px;
  background: lightblue;
}

Here, the element moves 20px left from its normal spot.

---

🆚 right vs left

• right moves element relative to right edge; left moves relative to left edge.
• They can be combined with top and bottom for precise control.

---

🧠 Tips & Notes

• Use right with position set to absolute, fixed, relative, or sticky.
• For responsive designs, percentages can be handy: right: 5%.
• When combined with left, CSS uses rules to determine which takes precedence based on layout mode.

---

🖼️ Image Idea: Visualizing the right Property

Description:

• A container box with a smaller box inside.
• The smaller box is shown 30px from the right edge (with a highlighted space).
• Another example showing relative positioning shifting left.

🎯 Helps understand how right moves elements relative to their container.

---

🔚 Final Thought

The CSS right property is essential for controlling horizontal placement when working with positioned elements. Mastering it helps you build precise, flexible layouts.

---