20. Position Trong CSS

Thuộc tính position trong CSS cho phép bạn kiểm soát vị trí của một phần tử trên trang web. Nó xác định cách mà phần tử sẽ được đặt trong không gian trình bày và làm thế nào nó tương tác với các phần tử khác. Có các giá trị sau cho thuộc tính position:

static: Giá trị mặc định. Phần tử sẽ được hiển thị theo thứ tự trong HTML và không bị ảnh hưởng bởi các thuộc tính top, right, bottom, left.
relative: Phần tử sẽ được đặt theo vị trí ban đầu, nhưng bạn có thể dịch chuyển nó bằng cách sử dụng các thuộc tính top, right, bottom, left.
absolute: Phần tử sẽ được đặt dựa trên phần tử cha có thuộc tính position khác static. Nó sẽ di chuyển theo vị trí của cha mẹ và có thể được điều chỉnh bằng các thuộc tính top, right, bottom, left.
fixed: Phần tử sẽ được đặt tại một vị trí cố định trên trang web, không bị ảnh hưởng bởi cuộn trang. Các thuộc tính top, right, bottom, left có thể được sử dụng để xác định vị trí cụ thể.
sticky: Phần tử sẽ bám vào vị trí cố định khi cuộn trang, nhưng chỉ khi nó vượt qua một ngưỡng cụ thể. Các thuộc tính top, right, bottom, left cũng có thể được sử dụng để xác định vị trí.

Ví dụ:

css

/* Đặt phần tử .box là relative và dịch chuyển nó 20px sang phải */
.box {
    position: relative;
    left: 20px;
}

/* Đặt phần tử .popup là absolute và đặt nó 20px từ top và 10px từ left của phần tử cha */
.popup {
    position: absolute;
    top: 20px;
    left: 10px;
}

/* Đặt phần tử .header là fixed và đặt nó 0px từ trên và trái */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: lightgray;
}

Thông qua các giá trị của thuộc tính position, bạn có thể tạo ra các bố cục phức tạp và điều chỉnh vị trí của các phần tử trên trang web của bạn.

Dưới đây là một số ví dụ cụ thể về cách sử dụng thuộc tính position trong CSS để điều chỉnh vị trí của các phần tử trên trang web:

Relative Position:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .relative-container {
            position: relative;
            width: 300px;
            height: 200px;
            background-color: lightblue;
        }

        .relative-box {
            position: relative;
            top: 30px;
            left: 20px;
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }
    </style>
    <title>Relative Position Example</title>
</head>
<body>
    <div class="relative-container">
        <div class="relative-box">Relative Box</div>
    </div>
</body>
</html>

Absolute Position:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .absolute-container {
            position: relative;
            width: 300px;
            height: 200px;
            background-color: lightblue;
        }

        .absolute-box {
            position: absolute;
            top: 30px;
            left: 20px;
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }
    </style>
    <title>Absolute Position Example</title>
</head>
<body>
    <div class="absolute-container">
        <div class="absolute-box">Absolute Box</div>
    </div>
</body>
</html>

Fixed Position:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .fixed-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: lightgray;
            padding: 10px;
            text-align: center;
        }

        .content {
            margin-top: 50px;
            padding: 20px;
            background-color: lightblue;
        }
    </style>
    <title>Fixed Position Example</title>
</head>
<body>
    <div class="fixed-header">Fixed Header</div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
    </div>
</body>
</html>

Trong các ví dụ trên, bạn có thể thay đổi giá trị của position, top, left, width, và height để thấy sự ảnh hưởng của các thuộc tính này đối với vị trí và kích thước của các phần tử trên trang web.

Leave a Comment Cancel Reply