Tidadigi Logo

CSS bottom Property

Thuộc tính CSS bottom ảnh hưởng đến vị trí dọc của một phần tử được định vị. Thuộc tính này không ảnh hưởng đến các phần tử không được định vị. Nó kiểm soát khoảng cách dọc của một phần tử so với cạnh dưới. Khoảng cách này được tính từ phần tử chứa nó bằng các đơn vị như pixel, phần trăm hoặc từ khóa (auto, initial, inherit).

CSS bottom Property Usage

Vị trí và mô tả thuộc tính bottom là

  • absolute/fixed: Đặt bottom liên quan đến tổ tiên được định vị gần nhất.
  • relative: Di chuyển bottom tương đối so với vị trí bình thường của nó.
  • sticky: Hoạt động như relative bên trong viewport, fixed bên ngoài.
  • static: Thuộc tính bottom không có hiệu lực.

Syntax

bottom: auto| length| %| initial| inherit;

Property values

ValueDescription
autoGiá trị mặc định; trình duyệt xác định vị trí cạnh dưới.
LengthĐặt vị trí cạnh dưới theo pixel (px), centimet (cm). Giá trị âm được cho phép.
PercentageĐặt vị trí cạnh dưới theo tỷ lệ phần trăm của phần tử chứa. Bao gồm cả các giá trị âm.
initialĐặt thuộc tính về giá trị mặc định của nó.
inheritKế thừa giá trị thuộc tính từ phần tử cha của nó.

. Using bottom property value as auto

Sử dụng giá trị auto cho thuộc tính bottom cho phép trình duyệt tự động xác định vị trí của phần tử từ phía dưới.

Example: Ví dụ này, đoạn văn bên dưới sử dụng fixed positioning. bottom được đặt thành auto, cho phép trình duyệt điều chỉnh vị trí của nó một cách linh hoạt.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>CSS Bottom Property</title>
</head>

<body>
    <h1 style="color:darkgreen;">
        GeeksforGeeks
    </h1>
    <p style="position: fixed;
              bottom: auto;">
        This line will be auto adjusted for
        bottom based on the browser.
    </p>

</body>

</html>

Output:

css-bottom-property

. Using bottom property value in pixels

Sử dụng giá trị pixel cho thuộc tính bottom sẽ đặt vị trí của phần tử một khoảng cách cụ thể (tính bằng px) so với cạnh dưới.

Example: Trong ví dụ này, chúng ta có hai đoạn văn. Chúng ta sử dụng fixed positioning với thuộc tính bottom được đặt thành 50px và -15px. Các vị trí này được điều chỉnh cho phù hợp.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>CSS Bottom Property</title>
</head>

<body>
    <h1 style="color:darkgreen;">
        GeeksforGeeks
    </h1>
    <p style="position: fixed; 
              bottom: 50px;">
        This line will be adjusted for bottom based
        on the length provided, i.e. 50px.
    </p>

    <p style="position: fixed; 
              bottom: -15px;">
        This line will be adjusted for bottom based
        on the length provided, i.e. -15px.
    </p>

</body>

</html>

Output:

css-bottom-property

. Using bottom property value in Percentage

Sử dụng giá trị phần trăm cho thuộc tính bottom sẽ đặt vị trí của phần tử tương ứng với tỷ lệ phần trăm chiều cao của phần tử chứa.

Example: Trong ví dụ này, chúng ta sử dụng fixed positioning. Giá trị bottom được đặt theo phần trăm: 10% và -5%, điều chỉnh vị trí tương ứng.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>CSS Bottom Property</title>
</head>

<body>
    <h1 style="color:darkgreen;">
        GeeksforGeeks
    </h1>
    <p style="position: 
              fixed; bottom: 10%;">
        This line will be adjusted for bottom based
        on the percentage provided, i.e. 10%.
    </p>

    <p style="position: 
              fixed; bottom: -5%;">
        This line will be adjusted for bottom based
        on the percentage provided, i.e. -5%.
    </p>

</body>

</html>

Output:

css-bottom-property

. Using bottom property value initial

Sử dụng giá trị initial cho thuộc tính bottom sẽ đặt vị trí của phần tử về giá trị mặc định do trình duyệt xác định.

Example: Trong ví dụ này, đoạn văn sử dụng fixed positioning. Thuộc tính bottom được đặt thành "initial", điều chỉnh vị trí dựa trên hành vi mặc định của trình duyệt.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>CSS Bottom Property</title>
</head>

<body>
    <h1 style="color:darkgreen;">
        GeeksforGeeks
    </h1>
    <p style="position: fixed;
              bottom: initial;">
        This line will be adjusted for bottom based
        on the initial value of the browser.
    </p>

</body>

</html>

Output:

css-bottom-property

. Using bottom property value inherit

Sử dụng giá trị inherit cho thuộc tính bottom làm cho phần tử kế thừa vị trí bottom từ giá trị bottom của phần tử cha.

Example: Trong ví dụ này, đoạn văn sử dụng fixed positioning. Thuộc tính bottom được đặt thành "inherit", kế thừa vị trí của nó từ phần tử cha.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>CSS Bottom Property</title>
</head>

<body>
    <h1 style="color:darkgreen;">
        GeeksforGeeks
    </h1>
    <p style="position: fixed; 
              bottom: inherit;">
        This line will inherit the position
        from the parent element.
    </p>

</body>

</html>

Output:

css-bottom-property

Supported Browser:


Last Updated : 21/07/2025