CSS - right 屬性

上一頁
下一頁

CSS 的right屬性控制網頁上元素的水平位置。它僅影響使用position屬性定位的元素。它不影響未定位的元素。

right屬性根據元素的position屬性具有不同的效果。

  • absolute 或 fixed - 指定元素與其包含塊的內邊框右側的距離。

  • relative - 指定元素的右邊緣相對於其起始位置向左移動的距離。

  • static - 對元素的位置沒有影響。

  • sticky - 確定粘性約束矩形的右邊緣。

可能的值

  • auto - 預設值。瀏覽器將根據元素的寬度確定元素的右邊緣位置。

  • length - 可以指定正值、負值或空值。

  • percentage - 可以指定容器寬度的百分比。

應用於

所有HTML定位元素。

DOM語法

object.style.right = "2px";

CSS right - 使用絕對定位

以下示例演示如何使用position: absolute屬性和right屬性將元素定位到其父元素的右側 -

<html>
<head>
<style>
   .box {  
      background-color: #f2c3ee;
      color: #1144ec;
      font-weight: bold;
   }
   .absolute-box {
      position: absolute;
      width: 130px;
      height: 60px;
      padding: 2px;
      border: 2px solid #000000;
      background-color: #bbedbb;
      color: #e50c0c;
      border-radius: 5px;  
   }
   .right {
      right: 0;
   } 
   .right-px {
      right: 60px;
   } 
   .right-per {
      right: 30%;  
   } 
   .right-em {
      right: 2em;  
   } 
      .right-auto {
      right: auto;  
   }
</style>
</head>
<body>
   <div class="box">
      <div class="absolute-box right">
         Absolute positioning with 0 right margin.
      </div>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
      <div class="absolute-box right-px">
         Absolute positioning with 60px right margin.
      </div>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
      <div class="absolute-box right-per">  
         Absolute positioning with 30% right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
      <div class="absolute-box right-em">
         Absolute positioning with 2em right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
         <div class="absolute-box right-auto">
         Absolute positioning with auto right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
   </div>
</body>
</html>

CSS right - 使用固定定位

以下示例演示如何使用position: fixed屬性和right屬性將元素定位到視口的右邊緣，即使頁面滾動時也保持在同一位置 -

<html>
<head>
<style>
   .box {  
      background-color: #f2c3ee;
      color: #1144ec;
      font-weight: bold;
   }
   .fixed-box {
      position: fixed;
      width: 130px;
      height: 60px;
      padding: 2px;
      border: 2px solid #000000;
      background-color: #bbedbb;
      color: #e50c0c;
      border-radius: 5px;  
   }
   .right {
      right: 0;
   } 
   .right-px {
      right: 60px;
   } 
   .right-per {
      right: 30%;  
   } 
   .right-em {
      right: 2em;  
   } 
   .right-auto {
      right: auto;  
   }
</style>
</head>
<body>
   <div class="box">
      <div class="fixed-box right">
         Fixed positioning with 0 right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      <div class="fixed-box right-px">
         Fixed positioning with 60px right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      <div class="fixed-box right-per">  
         Fixed positioning with 30% right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      <div class="fixed-box right-em">
         Fixed positioning with 2em right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      <div class="fixed-box right-auto">  
         Fixed positioning with auto right margin.
      </div>
         Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
   </div>
</body>
</html>

CSS right - 使用相對定位

以下示例演示如何使用position: relative屬性和right屬性將元素從右邊緣移動到其正常位置的左側 -

<html>
<head>
<style>
   .box {  
      background-color: #f2c3ee;
      color: #1144ec;
      font-weight: bold;
      margin-left:10%;
   }
   .relative-box {
      position: relative;
      width: 130px;
      height: 60px;
      padding: 2px;
      border: 2px solid #000000;
      background-color: #bbedbb;
      color: #e50c0c;
      border-radius: 5px;  
   }
   .right {
      right: 0;
   } 
   .right-px {
      right: 30px;
   } 
   .right-per {
      right: 10%;  
   } 
   .right-em {
      right: 1em;  
   } 
   .right-auto {
      right: auto;  
   }
</style>
</head>
<body>
   <div class="box">
      <div class="relative-box right">
         Relative positioning with 0 right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      <div class="relative-box right-px">
         Relative positioning with 30px right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      <div class="relative-box right-per">  
         Relative positioning with 10% right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      <div class="relative-box right-em">
         Relative positioning with 1em right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      <div class="relative-box right-auto">  
         Relative positioning with auto right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
   </div>
</body>
</html>

CSS right - 使用靜態定位

以下示例演示如果position屬性設定為static，則right屬性將對元素的定位沒有影響 -

<html>
<head>
<style>
   .box {  
      background-color: #f2c3ee;
      color: #1144ec;
      font-weight: bold;
   }
   .static-box {
      position: static;
      width: 130px;
      height: 60px;
      padding: 2px;
      border: 2px solid #000000;
      background-color: #bbedbb;
      color: #e50c0c;
      border-radius: 5px;  
   }
   .right {
      right: 0;
   } 
   .right-px {
      right: 60px;
   } 
   .right-per {
      right: 30%;  
   } 
   .right-em {
      right: 2em;  
   } 
   .right-auto {
      right: auto;  
   }
</style>
</head>
<body>
   <div class="box">
      <div class="static-box right">
         Static positioning with 0 right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      <div class="static-box right-px">
         Static positioning with 60px right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      <div class="static-box right-per">  
         Static positioning with 30% right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      <div class="static-box right-em">
         Static positioning with 2em right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      <div class="static-box right-auto">  
         Static positioning with auto right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
   </div>
</body>
</html>

CSS right - 使用粘性定位

以下示例演示如何使用position: sticky和right屬性建立當用戶滾動時貼上到視口的元素 -

<html>
<head>
<style>
   .box {  
      background-color: #f2c3ee;
      color: #1144ec;
      font-weight: bold;
      padding: 10px;
   }
   .sticky-container {
      position: relative; 
   }
   .sticky-box {
      position: sticky;
      width: 130px;
      height: 60px;
      padding: 2px;
      border: 2px solid #000000;
      background-color: #bbedbb;
      color: #e50c0c;
      border-radius: 5px;  
      top: 10px;
   }
   .right {
      right: 0;
   } 
   .right-px {
      right: 60px;
   } 
   .right-per {
      right: 30%;  
   } 
   .right-em {
      right: 2em;  
   } 
   .right-auto {
      right: auto;  
   }
</style>
</head>
<body>
   <div class="box">
      <div class="sticky-container">
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         <div class="sticky-box right">
            Sticky positioning with 0 right margin.
         </div>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      </div>
   </div>
</body>
</html>
列印頁面
上一頁
下一頁
廣告