CSS - left 属性

上一页
下一页

CSS 的 left 属性用于指定定位元素相对于其包含元素的水平位置。它确定元素的左边缘位置。

根据 position 属性的值，确定 left 属性的效果。

Position 值 Bottom 属性
absolute or fixed 指定元素的左边缘的外边距与容器左边缘的内边框之间的距离。
relative 指定元素的左边缘从其正常位置向右移动的距离。
sticky 用于计算粘性约束矩形。
static 对元素没有影响。
当两者都已指定并且宽度约束不会阻止它时，元素将拉伸以满足 left 和 right 的值。

在这种情况下，当元素无法自行拉伸时，当容器从左到右时，左边的值优先于右边的值。当容器从右到左时，右边的值优先于左边的值。

可能的值

  • <length> - 可以指定负值、空值或正值。
  • <percentage> - 容器宽度的百分比。
  • auto − 默认值。浏览器计算左侧位置。

适用于

所有 HTML 定位的元素。

DOM 语法


object.style.left = "2px";

CSS left - 具有绝对位置

以下示例演示如何使用 position： absolute 属性和 left 属性将元素定位在其父元素的左侧 -


<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; 	
	 	}
	 	.left{
	 	 	 left: 0;
	 	}	
	 	.left-px {
	 	 	 left: 60px;
	 	}	
	 	.left-per {
	 	 	 left: 30%; 	
	 	}	
	 	.left-em {
	 	 	 left: 2em; 	
	 	}	
	 	 	 .left-auto {
	 	 	 left: auto; 	
	 	}
</style>
</head>
<body>
	 	<div class="box">
	 	 	 <div class="absolute-box left">
	 	 	 	 	Absolute positioning with 0 left 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 left-px">
	 	 	 	 	Absolute positioning with 60px left 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 left-per"> 	
	 	 	 	 	Absolute positioning with 30% left 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 left-em">
	 	 	 	 	Absolute positioning with 2em left 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 left-auto">
	 	 	 	 	Absolute positioning with auto left 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 left - 固定位置

以下示例演示如何使用 position： fixed 属性和 left 属性将元素定位到视口的左边缘，并在页面滚动时将其保持在同一位置 -


<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; 	
	 	}
	 	.left {
	 	 	 left: 0;
	 	}	
	 	.left-px {
	 	 	 left: 60px;
	 	}	
	 	.left-per {
	 	 	 left: 30%; 	
	 	}	
	 	.right-em {
	 	 	 left: 2em; 	
	 	}	
	 	.left-auto {
	 	 	 left: auto; 	
	 	}
</style>
</head>
<body>
	 	<div class="box">
	 	 	 <div class="fixed-box left">
	 	 	 	 	Fixed positioning with 0 left 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 left-px">
	 	 	 	 	Fixed positioning with 60px left 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 left-per"> 	
	 	 	 	 	Fixed positioning with 30% left 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 left-em">
	 	 	 	 	Fixed positioning with 2em left 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 left-auto"> 	
	 	 	 	 	Fixed positioning with auto left 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 left - 具有相对位置

以下示例演示如何使用 position： relative 属性和 left 属性将元素从其正常位置的左边缘移动到左侧 -


<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; 	
	 	}
	 	.left {
	 	 	 left: 0;
	 	}	
	 	.left-px {
	 	 	 left: 30px;
	 	}	
	 	.left-per {
	 	 	 left: 10%; 	
	 	}	
	 	.left-em {
	 	 	 left: 1em; 	
	 	}	
	 	.left-auto {
	 	 	 left: auto; 	
	 	}
</style>
</head>
<body>
	 	<div class="box">
	 	 	 <div class="relative-box left">
	 	 	 	 	Relative positioning with 0 left 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 left-px">
	 	 	 	 	Relative positioning with 30px left 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 left-per"> 	
	 	 	 	 	Relative positioning with 10% left 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 left-em">
	 	 	 	 	Relative positioning with 1em left 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 left-auto"> 	
	 	 	 	 	Relative positioning with auto left 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 left - 静态位置

以下示例演示了如果将 position 属性设置为 static - 则 left 属性对元素的位置没有影响 -


<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; 	
	 	}
	 	.left {
	 	 	 left: 0;
	 	}	
	 	.left-px {
	 	 	 left: 60px;
	 	}	
	 	.left-per {
	 	 	 left: 30%; 	
	 	}	
	 	.left-em {
	 	 	 left: 2em; 	
	 	}	
	 	.left-auto {
	 	 	 left: auto; 	
	 	}
</style>
</head>
<body>
	 	<div class="box">
	 	 	 <div class="static-box left">
	 	 	 	 	Static positioning with 0 left 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 left-px">
	 	 	 	 	Static positioning with 60px left 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 left-per"> 	
	 	 	 	 	Static positioning with 30% left 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 left-em">
	 	 	 	 	Static positioning with 2em left 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 left-auto"> 	
	 	 	 	 	Static positioning with auto left 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 left - 具有粘滞位置

以下示例演示如何使用 position： sticky and left 属性创建一个元素，当用户滚动时，该元素会粘附在视口上 -


<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;
	 	}
	 	.left {
	 	 	 left: 0;
	 	}	
</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 left">
	 	 	 	 	 	 Sticky positioning with 0 left 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>
本页
上一页
下一页