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

列印頁面