CSS - Right 属性

上一页
下一页

CSS right 属性控制元素在网页上的水平位置。它仅影响已使用 position 属性定位的元素。它不会影响未定位的元素。

right 属性具有不同的效果，具体取决于元素的位置。

  • absolute or 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 and 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>
打印本页
上一页
下一页