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>
打印页面
上一页
下一页
广告