CSS - left 属性

CSS left 属性用于指定已定位元素相对于其容器元素的水平位置。它确定元素的左边缘位置。根据position 属性的值，确定left 属性的效果。

语法

left: auto | length | percentage | initial | inherit;

属性值

值	描述
auto	浏览器计算左位置。默认值。
长度	它以长度单位 (px、em、rem 等) 指定左边缘位置。允许负值。
百分比	它相对于容器元素指定左边缘位置的百分比。允许负值。
initial	它将属性设置为其默认值。
inherit	它从父元素继承属性。

CSS Left 属性示例

以下示例说明了具有不同值的left 属性。

使用绝对定位的 Left 属性

使用position: absolute，left 属性确定元素左边缘到最近的已定位祖先元素的水平距离。如果不存在已定位祖先元素，则从初始包含块进行定位。这在以下示例中显示。使用了不同的距离单位。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         background-color: lightgreen;
         padding: 10px;
         color: green;
      }

      .absolute-box {
         font-weight: bold;
         position: absolute;
         width: 130px;
         height: 50px;
         padding: 2px;
         border: 3px solid green;
         background-color: #bbedbb;
         color: #e50c0c;
      }

      .left {
         left: 0;
      }

      .left-px {
         left: 60px;
      }

      .left-per {
         left: 30%;
      }

      .left-em {
         left: 4em;
      }

      .left-auto {
         left: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS left property
   </h2>
   <h4>
      position: absolute
   </h4>
   <div class="box">
      <div class="absolute-box left">
         position:absolute; left: 0;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="absolute-box left-px">
         position:absolute; left: 60px;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="absolute-box left-per">
         position:absolute; left: 30%;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="absolute-box left-em">
         position:absolute; left: 4em;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="absolute-box left-auto">
         position:absolute; left: auto;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
   </div>
</body>

</html>

使用固定定位的 Left 属性

使用position: fixed，left 属性设置元素距视口左边缘的距离。即使在页面滚动期间，元素也保持其位置。这在以下示例中显示。使用了不同的距离单位。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         background-color: lightgreen;
         padding: 10px;
         color: green;
      }

      .fixed-box {
         font-weight: bold;
         position: fixed;
         width: 130px;
         height: 50px;
         padding: 2px;
         border: 3px solid green;
         background-color: #bbedbb;
         color: #e50c0c;
      }

      .left-px {
         left: 60px;
      }

      .left-per {
         left: 30%;
      }

      .left-auto {
         left: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS left property
   </h2>
   <h4>
      position: fixed
   </h4>
   <div class="box">
      <div class="fixed-box left-px">
         position: fixed; left: 60px;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="fixed-box left-per">
         position: fixed; left: 30%;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="fixed-box left-auto">
         position: fixed; left: auto;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
   </div>
</body>

</html>

使用相对定位的 Left 属性

使用position: relative，left 属性相对于正常位置定位元素。如果给出正值，元素向右移动；如果给出负值，元素向左移动，而不会影响其他元素。这在以下示例中显示。使用了不同的距离单位。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         background-color: lightgreen;
         padding: 10px;
         color: green;
      }

      .relative-box {
         font-weight: bold;
         position: relative;
         width: 130px;
         height: 50px;
         padding: 2px;
         border: 3px solid green;
         background-color: #bbedbb;
         color: #e50c0c;
      }

      .left {
         left: 0;
      }

      .left-px {
         left: 60px;
      }

      .left-per {
         left: 30%;
      }

      .left-em {
         left: 4em;
      }

      .left-auto {
         left: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS left property
   </h2>
   <h4>
      position: relative
   </h4>
   <div class="box">
      <div class="relative-box left">
         position: relative; left: 0;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="relative-box left-px">
         position: relative; left: 60px;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="relative-box left-per">
         position: relative; left: 30%;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="relative-box left-em">
         position: relative; left: 4em;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="relative-box left-auto">
         position: relative; left: auto;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
   </div>
</body>

</html>

使用静态定位的 Left 属性

使用position: static，left 属性无效，元素根据正常的文档流进行定位。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         background-color: lightgreen;
         padding: 10px;
         color: green;
      }

      .static-box {
         font-weight: bold;
         position: static;
         width: 130px;
         height: 50px;
         padding: 2px;
         border: 3px solid green;
         background-color: #bbedbb;
         color: #e50c0c;
      }

      .left {
         left: 0;
      }

      .left-px {
         left: 60px;
      }

      .left-per {
         left: 30%;
      }

      .left-em {
         left: 4em;
      }

      .left-auto {
         left: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS left property
   </h2>
   <h4>
      position: static
   </h4>
   <div class="box">
      <div class="static-box left">
         position: static; left: 0;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="static-box left-px">
         position: static; left: 60px;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="static-box left-per">
         position: static; left: 30%;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="static-box left-em">
         position: static; left: 4em;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="static-box left-auto">
         position: static; left: auto;
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
   </div>
</body>

</html>

使用粘性定位的 Left 属性

使用position: sticky，left 属性控制元素在其包含块内的位置，直到达到定义的阈值。在滚动期间超过此阈值后，元素的行为就像它被固定一样，粘附在 left 属性定义的位置。这在以下示例中显示。使用了不同的距离单位。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         background-color: lightgreen;
         color: green;
         padding: 10px;
      }

      .sticky-container {
         position: relative;
      }

      .sticky-box {
         position: sticky;
         width: 130px;
         height: 60px;
         padding: 2px;
         border: 3px solid green;
         background-color: #bbedbb;
         color: #e50c0c;
         font-weight: bold;
         top: 10px;
      }

      .left {
         left: 40px;
      }
   </style>
</head>

<body>
   <h2>
      CSS left property
   </h2>
   <h4>
      position: sticky
   </h4>
   <div class="box">
      <div class="sticky-container">
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      <div class="sticky-box left">
            position: sticky; left: 40px.
      </div>
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
         TutorialsPoint is a versatile online 
         educational platform that provides a 
         vast array of free tutorials and 
         courses across numerous subjects,such 
         as programming, web development, data 
         science, and more. It caters to learners 
         of all levels, offering detailed explanations, 
         practical examples, and interactive exercises
         to enhance understanding and skills.Ideal for 
         self-paced learning and skill development.
      </div>
   </div>
</body>

</html>

position 值	Bottom 属性
absolute 或 fixed	它指定元素左边缘的外边距和容器左边缘内边框之间的距离。
relative	它指定元素左边缘从其正常位置向右移动的距离。
sticky	当元素在视口中时，该属性的行为类似于其位置为 relative；当元素在视口外时，该属性的行为类似于其位置为 fixed。
static	left 属性对元素没有影响。

支持的浏览器

属性
left	1.0	5.5	1.0	1.0	5.0

css_properties_reference.htm

打印页面