left

Try it

left: 0;

left: 4em;

left: 10%;

left: 20px;

<section id="default-example">
  <div class="example-container">
    <div id="example-element">I am absolutely positioned.</div>
    <p>
      As much mud in the streets as if the waters had but newly retired from the
      face of the earth, and it would not be wonderful to meet a Megalosaurus,
      forty feet long or so, waddling like an elephantine lizard up Holborn
      Hill.
    </p>
  </div>
</section>

.example-container {
  border: 0.75em solid;
  padding: 0.75em;
  text-align: left;
  position: relative;
  width: 100%;
  min-height: 200px;
}

#example-element {
  background-color: #264653;
  border: 4px solid #ffb500;
  color: white;
  position: absolute;
  width: 140px;
  height: 60px;
}

Cú pháp

/* Giá trị <length> */
left: 3px;
left: 2.4em;
left: anchor(--my-anchor 50%);
left: calc(anchor-size(--my-anchor inline, 100px) * 2);

/* <percentage> của chiều rộng khối chứa */
left: 10%;

/* Giá trị từ khóa */
left: auto;

/* Giá trị toàn cục */
left: inherit;
left: initial;
left: revert;
left: revert-layer;
left: unset;

Giá trị

<length>

Một <length> âm, không hoặc dương:

• Đối với phần tử được định vị tuyệt đối, nó biểu thị khoảng cách đến cạnh trái của khối chứa.
• Đối với phần tử được định vị theo neo, hàm anchor() phân giải thành giá trị <length> tương đối so với vị trí của cạnh trái hoặc phải của phần tử neo liên kết (xem Sử dụng thuộc tính inset với giá trị hàm anchor()), và hàm anchor-size() phân giải thành giá trị <length> tương đối so với chiều rộng hoặc chiều cao của phần tử neo liên kết (xem Đặt vị trí phần tử dựa trên kích thước neo).
• Đối với phần tử được định vị tương đối, nó biểu thị khoảng cách phần tử được dịch chuyển sang phải so với vị trí bình thường của nó.

<percentage>

Một <percentage> của chiều rộng khối chứa.

auto

Chỉ định rằng:

• Đối với phần tử được định vị tuyệt đối, vị trí của phần tử dựa trên thuộc tính right, trong khi width: auto được xử lý như chiều rộng dựa trên nội dung; hoặc nếu right cũng là auto, phần tử được đặt ở vị trí ngang mà nó sẽ ở nếu là phần tử tĩnh.
• Đối với phần tử được định vị tương đối, khoảng cách của phần tử từ vị trí bình thường của nó dựa trên thuộc tính right; hoặc nếu right cũng là auto, phần tử không bị dịch chuyển theo chiều ngang.

Mô tả

Hiệu lực của left phụ thuộc vào cách phần tử được định vị (tức là giá trị của thuộc tính position):

• Khi position được đặt thành absolute hoặc fixed, thuộc tính left xác định khoảng cách giữa lề ngoài cạnh trái của phần tử và đường viền trong của cạnh trái khối chứa. (Khối chứa là tổ tiên mà phần tử được định vị tương đối.) Nếu phần tử được định vị có phần tử neo liên kết, và giá trị thuộc tính bao gồm hàm anchor(), left định vị cạnh trái của phần tử được định vị tương đối so với vị trí của cạnh <anchor-side> được chỉ định. Thuộc tính left tương thích với các giá trị left, right, start, end, self-start, self-end, center, và <percentage>.
• Khi position được đặt thành relative, thuộc tính left xác định khoảng cách cạnh trái của phần tử bị dịch chuyển sang phải từ vị trí bình thường của nó.
• Khi position được đặt thành sticky, thuộc tính left được dùng để tính toán hình chữ nhật ràng buộc sticky.
• Khi position được đặt thành static, thuộc tính left không có hiệu lực.

Khi cả left và right đều được xác định, và ràng buộc chiều rộng không ngăn cản, phần tử sẽ co giãn để thỏa mãn cả hai. Nếu phần tử không thể co giãn để thỏa mãn cả hai, vị trí của phần tử là được chỉ định quá mức. Trong trường hợp này, giá trị left được ưu tiên khi bộ chứa theo chiều trái sang phải; giá trị right được ưu tiên khi bộ chứa theo chiều phải sang trái.

Định nghĩa hình thức

Cú pháp hình thức

left = 
  auto                 |
  <length-percentage>  |
  <anchor()>           |
  <anchor-size()>      

<length-percentage> = 
  <length>      |
  <percentage>  

<anchor()> = 
  anchor( <anchor-name>?                  &&
  <anchor-side> , <length-percentage>? )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<anchor-name> = 
  <dashed-ident>  

<anchor-side> = 
  inside        |
  outside       |
  top           |
  left          |
  right         |
  bottom        |
  start         |
  end           |
  self-start    |
  self-end      |
  <percentage>  |
  center        

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

Ví dụ

Định vị các phần tử

HTML

<div id="wrap">
  <div id="example_1">
    <pre>
      position: absolute;
      left: 20px;
      top: 20px;
    </pre>
    <p>
      The only containing element for this div is the main window, so it
      positions itself in relation to it.
    </p>
  </div>

  <div id="example_2">
    <pre>
      position: relative;
      top: 0;
      right: 0;
    </pre>
    <p>Relative position in relation to its siblings.</p>
  </div>

  <div id="example_3">
    <pre>
      float: right;
      position: relative;
      top: 20px;
      left: 20px;
    </pre>
    <p>Relative to its sibling div above, but removed from flow of content.</p>

    <div id="example_4">
      <pre>
        position: absolute;
        bottom: 10px;
        right: 20px;
      </pre>
      <p>Absolute position inside of a parent with relative position</p>
    </div>

    <div id="example_5">
      <pre>
        position: absolute;
        right: 0;
        left: 0;
        top: 200px;
      </pre>
      <p>Absolute position with both left and right declared</p>
    </div>
  </div>
</div>

CSS

#wrap {
  width: 700px;
  margin: 0 auto;
  background: #5c5c5c;
}

pre {
  white-space: pre-line;
  word-wrap: break-word;
}

#example_1 {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 20px;
  top: 20px;
  background-color: #d8f5ff;
}

#example_2 {
  width: 200px;
  height: 200px;
  position: relative;
  top: 0;
  right: 0;
  background-color: #c1ffdb;
}
#example_3 {
  width: 600px;
  height: 400px;
  position: relative;
  top: 20px;
  left: 20px;
  background-color: #ffd7c2;
}

#example_4 {
  width: 200px;
  height: 200px;
  position: absolute;
  bottom: 10px;
  right: 20px;
  background-color: #ffc7e4;
}
#example_5 {
  position: absolute;
  right: 0;
  left: 0;
  top: 100px;
  background-color: #d7ffc2;
}

Kết quả

Thông số kỹ thuật

Khả năng tương thích trình duyệt

Xem thêm

• top, bottom, và right
• Viết tắt inset
• inset-block-start, inset-block-end, inset-inline-start, và inset-inline-end
• Viết tắt inset-block và inset-inline
• position
• Mô-đun CSS positioned layout