Hướng dẫn how do you keep an element right in css? - làm thế nào để bạn giữ một phần tử ngay trong css?

Thử nó

Cú pháp

/*  values */
right: 3px;
right: 2.4em;

/* s of the width of the containing block */
right: 10%;

/* Keyword value */
right: auto;

/* Global values */
right: inherit;
right: initial;
right: revert;
right: revert-layer;
right: unset;

Giá trị

Một tiêu cực, null hoặc tích cực đại diện cho:

• Đối với các phần tử được định vị hoàn toàn, khoảng cách vào cạnh phải của khối chứa.
• Đối với các phần tử tương đối có vị trí, khoảng cách mà phần tử được di chuyển sang bên trái của vị trí bình thường.

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

right = 
  auto                 |
    
 = 
        |
  

Chỉ định rằng:

• Đối với các phần tử được định vị hoàn toàn, vị trí của phần tử dựa trên thuộc tính

  right = 
    auto                 |
      
   = 
          |
    

  2, trong khi

  right = 
    auto                 |
      
   = 
          |
    

  3 được coi là chiều rộng dựa trên nội dung; hoặc nếu

  right = 
    auto                 |
      
   = 
          |
    
  
  
  
  

  2 cũng là

  right = 
    auto                 |
      
   = 
          |
    

  1, phần tử được định vị ở nơi nó phải được định vị theo chiều ngang nếu nó là một phần tử tĩnh.
• Đối với các phần tử tương đối có vị trí, 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 = 
    auto                 |
      
   = 
          |
    

  2; hoặc nếu

  right = 
    auto                 |
      
   = 
          |
    

  2 cũng là

  right = 
    auto                 |
      
   = 
          |
    

  1, phần tử không được di chuyển theo chiều ngang.

right = 
  auto                 |
    
 = 
        |
  

Chỉ định rằng giá trị giống như giá trị được tính toán từ phần tử cha của nó (có thể không phải là khối chứa của nó). Giá trị được tính toán này sau đó được xử lý như thể nó là từ khóa , hoặc từ khóa

right = 
  auto                 |
    
 = 
        |
  

Sự mô tả

Ảnh hưởng của right phụ thuộc vào cách định vị phần tử (nghĩa là, giá trị của thuộc tính

<div id="relative">Relatively positioneddiv>
<div id="absolute">Absolutely positioneddiv>

• Khi

  <div id="relative">Relatively positioneddiv>
  <div id="absolute">Absolutely positioneddiv>
  

  4 được đặt thành

  <div id="relative">Relatively positioneddiv>
  <div id="absolute">Absolutely positioneddiv>
  

  6 hoặc

  <div id="relative">Relatively positioneddiv>
  <div id="absolute">Absolutely positioneddiv>
  

  7, thuộc tính right chỉ định khoảng cách giữa rìa ngoài của phần tử của cạnh phải và đường viền bên trong của cạnh phải của khối chứa.
• Khi

  <div id="relative">Relatively positioneddiv>
  <div id="absolute">Absolutely positioneddiv>
  

  4 được đặt thành

  #relative {
    width: 100px;
    height: 100px;
    background-color: #ffc7e4;
    position: relative;
    top: 20px;
    left: 20px;
  }
  
  #absolute {
    width: 100px;
    height: 100px;
    background-color: #ffd7c2;
    position: absolute;
    bottom: 10px;
    right: 20px;
  }
  

  0, thuộc tính right chỉ định khoảng cách mà cạnh phải của phần tử được di chuyển sang trái từ vị trí bình thường của nó.
• Khi

  <div id="relative">Relatively positioneddiv>
  <div id="absolute">Absolutely positioneddiv>
  

  4 được đặt thành

  #relative {
    width: 100px;
    height: 100px;
    background-color: #ffc7e4;
    position: relative;
    top: 20px;
    left: 20px;
  }
  
  #absolute {
    width: 100px;
    height: 100px;
    background-color: #ffd7c2;
    position: absolute;
    bottom: 10px;
    right: 20px;
  }
  

  3, thuộc tính right được sử dụng để tính toán hình chữ nhật ràng buộc dính.
• Khi

  <div id="relative">Relatively positioneddiv>
  <div id="absolute">Absolutely positioneddiv>
  

  4 được đặt thành

  #relative {
    width: 100px;
    height: 100px;
    background-color: #ffc7e4;
    position: relative;
    top: 20px;
    left: 20px;
  }
  
  #absolute {
    width: 100px;
    height: 100px;
    background-color: #ffd7c2;
    position: absolute;
    bottom: 10px;
    right: 20px;
  }
  

  6, thuộc tính right không có hiệu lực.

Khi cả

right = 
  auto                 |
    
 = 
        |
  

<div id="parent">
  Parent
  <div id="noWidth">No widthdiv>
  <div id="width">width: 100pxdiv>
div>

right = 
  auto                 |
    
 = 
        |
  

Định nghĩa chính thức

Cú pháp chính thức

right = 
  auto                 |
    
 = 
        |
  

Ví dụ

Định vị tuyệt đối và tương đối bằng cách sử dụng đúng

HTML

<div id="relative">Relatively positioneddiv>
<div id="absolute">Absolutely positioneddiv>

CSS

#relative {
  width: 100px;
  height: 100px;
  background-color: #ffc7e4;
  position: relative;
  top: 20px;
  left: 20px;
}

#absolute {
  width: 100px;
  height: 100px;
  background-color: #ffd7c2;
  position: absolute;
  bottom: 10px;
  right: 20px;
}

Kết quả

Tuyên bố cả trái và phải

Khi cả

right = 
  auto                 |
    
 = 
        |
  

right = 
  auto                 |
    
 = 
        |
  

HTML

<div id="parent">
  Parent
  <div id="noWidth">No widthdiv>
  <div id="width">width: 100pxdiv>
div>

CSS

Kết quả

Kết quả

Mô -đun bố cục được định vị CSS Cấp 3 # Insets

• Tính tương thích của trình duyệt web
• Bảng BCD chỉ tải trong trình duyệt

• <div id="relative">Relatively positioneddiv>
  <div id="absolute">Absolutely positioneddiv>
  

  4