คุณสมบัติ right

คุณสมบัติ right กำหนดตำแหน่งของขอบขวาขององค์ประกอบ ค่าสำหรับคุณสมบัติสามารถระบุได้ด้วยหน่วยวัดขนาดที่ใช้กันทั่วไป เช่น พิกเซล นิ้ว พอยต์ เปอร์เซ็นต์ ค่าที่กำหนดอาจเป็นตัวเลขติดลบได้ ในกรณีนี้องค์ประกอบจะซ้อนทับกัน การอ้างอิงพิกัดถูกกำหนดโดยคุณสมบัติ position ซึ่งโดยปกติจะมีค่า relative (ตำแหน่งสัมพัทธ์) หรือ absolute (ตำแหน่งสัมบูรณ์)

ไวยากรณ์

cssselector {
  right: size หรือ auto;
}

ตัวอย่าง

มาเริ่มต้นด้วยการตั้งค่าตำแหน่งขอบขวาขององค์ประกอบลูกเมื่อนำเมาส์ไปวางไว้ให้เท่ากับ 25px:

html<div id="elem">
  <p></p>
</div>

css#elem {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}
p {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-left: 50px;
}
p:hover {
  right: 25px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат:

ตัวอย่าง

และตอนนี้ให้ขอบขวาขององค์ประกอบลูกเมื่อนำเมาส์ไปวางอยู่ที่ -50px:

html<div id="elem">
  <p></p>
</div>

css#elem {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}
p {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-left: 50px;
}
p:hover {
  right: -50px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат:

ดูเพิ่มเติม