Cách thiết lập vị trí cho một phần tử HTML

- Thiết lập vị trí cho phần tử có nghĩa là chỉ định nơi mà phần tử sẽ được hiển thị trên trang web.

- Để thiết lập vị trí cho một phần tử thì chúng ta cần phải biết cách sử dụng năm thuộc tính:

(1) position

(2) top

(3) right

(4) bottom

(5) left

- Trong đó, thuộc tính position có vai trò quan trọng nhất, nó dùng để xác định phương thức định vị phần tử, bốn thuộc tính còn lại dùng để xác định vị trí của phần tử sau khi chúng ta đã xác định phương thức định vị.

- Có bốn loại phương thức định vị: static, relative, fixed, absolute.

- Tùy vào phương thức định vị mà khi chúng ta thiết lập giá trị cho các thuộc tính top, right, bottom, left thì phần tử sẽ hiển thị ở những vị trí khác nhau.

❏ Trong bài viết này, tôi sẽ làm sơ qua một vài cái ví dụ minh họa để giúp các bạn có thể hình dung ra cách thiết lập vị trí cho phần tử, cũng như là phân biệt được điểm khác nhau giữa bốn loại phương thức định vị (static, relative, fixed, absolute)

1) Phương thức định vị static

- Phương thức định vị static là phương thức định vị mặc định của hầu hết các phần tử.

- Đối với loại phương thức định vị static, phần tử sẽ xuất hiện ở vị trí mặc định dựa theo thứ tự khai báo, chúng ta không thể sử dụng các thuộc tính top, right, bottom, left để thiết lập lại vị trí cho phần tử.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #test{
            border:1px solid blue;
            position:static;
            top:20px;
            right:20px;
            bottom:20px;
            left:20px;
        }
    </style>
</head>
<body>
    <h1>1) Tài liệu hướng dẫn học HTML</h1>
    <h1 id="test">2) Tài liệu hướng dẫn học CSS</h1>
    <h1>3) Tài liệu hướng dẫn học JavaScript</h1>
</body>
</html>

Xem ví dụ

2) Phương thức định vị relative

- Phương thức định vị relative cũng gần giống với phương thức định vị static, đó chính là phần tử sẽ xuất hiện ở vị trí mặc định dựa theo thứ tự khai báo. Tuy nhiên, đối với phương thức định vị relative thì chúng ta có thể sử dụng các thuộc tính top, right, bottom, left để thiết lập lại vị trí cho phần tử.

- Lưu ý: Đối với phương thức định vị relative, khi các bạn muốn thiết lập lại vị trí cho phần tử thì giữa hai thuộc tính top & bottom các bạn chỉ có thể sử dụng một thuộc tính, giữa hai thuộc tính left & right cũng tương tự như vậy.

Khi sử dụng thuộc tính top, nếu nó nhận giá trị dương thì phần tử sẽ di chuyển xuống dưới, nếu nó nhận giá trị âm thì phần tử sẽ di chuyển ngược lên trên.
Khi sử dụng thuộc tính left, nếu nó nhận giá trị dương thì phần tử sẽ di chuyển sang phải, nếu nó nhận giá trị âm thì phần tử sẽ di chuyển sang trái.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #test{
            border:1px solid black;
            background-color:pink;
            position:relative;
            top:50px;
            left:50px;
        }
    </style>
</head>
<body>
    <h1>1) Tài liệu hướng dẫn học HTML</h1>
    <h1 id="test">2) Tài liệu hướng dẫn học CSS</h1>
    <h1>3) Tài liệu hướng dẫn học JavaScript</h1>
</body>
</html>

Xem ví dụ

3) Phương thức định vị fixed

- Phương thức định vị fixed có thể xem là đặc biệt nhất trong bốn loại phương thức định vị, nó dùng để thiết lập phần tử nằm tại một vị trí cố định trên màn hình trình duyệt mặc cho người dùng có cuộn trang lên xuống hay trái phải (các bạn vui lòng click vào đây để hiểu rõ hơn về điều mà tôi vừa nói)

- Đối với phương thức định vị fixed, khi chúng ta sử dụng các thuộc tính top, right, bottom, left để thiết lập vị trí cho phần tử thì vị trí của phần tử sẽ được xác định dựa theo khung trang web.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #test{
            border:1px solid black;
            background-color:yellow;
            padding:30px;
            font-size:20px;
            position:fixed;
            top:0px;
            left:0px;
        }
    </style>
</head>
<body>
    <p>Tài liệu hướng dẫn học lập trình web 1</p>
    <p>Tài liệu hướng dẫn học lập trình web 2</p>
    <p>Tài liệu hướng dẫn học lập trình web 3</p>
    <p>Tài liệu hướng dẫn học lập trình web 4</p>
    <p>Tài liệu hướng dẫn học lập trình web 5</p>
    <div id="test">LẬP TRÌNH WEB</div>
    <p>Tài liệu hướng dẫn học lập trình web 6</p>
    <p>Tài liệu hướng dẫn học lập trình web 7</p>
    <p>Tài liệu hướng dẫn học lập trình web 8</p>
    <p>Tài liệu hướng dẫn học lập trình web 9</p>
    <p>Tài liệu hướng dẫn học lập trình web 10</p>
</body>
</html>

Xem ví dụ

- Lưu ý: Đối với phương thức định vị fixed, nếu chúng ta không thiết lập chiều rộng cho phần tử mà lại sử dụng đồng thời hai thuộc tính left & right thì chiều rộng của phần tử sẽ bị kéo dài từ vị trí left cho đến vị trí right. Tương tự, nếu chúng ta không thiết lập chiều cao cho phần tử mà lại sử dụng đồng thời hai thuộc tính top & bottom thì chiều cao của phần tử sẽ bị kéo dài từ vị trí top cho đến vị trí bottom.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #test{
            border:1px solid black;
            background-color:yellow;
            position:fixed;
            top:50px;
            bottom:50px;
            left:100px;
            right:100px;
        }
    </style>
</head>
<body>
    <p>Tài liệu hướng dẫn học lập trình web 1</p>
    <p>Tài liệu hướng dẫn học lập trình web 2</p>
    <p>Tài liệu hướng dẫn học lập trình web 3</p>
    <p>Tài liệu hướng dẫn học lập trình web 4</p>
    <p>Tài liệu hướng dẫn học lập trình web 5</p>
    <div id="test">LẬP TRÌNH WEB</div>
    <p>Tài liệu hướng dẫn học lập trình web 6</p>
    <p>Tài liệu hướng dẫn học lập trình web 7</p>
    <p>Tài liệu hướng dẫn học lập trình web 8</p>
    <p>Tài liệu hướng dẫn học lập trình web 9</p>
    <p>Tài liệu hướng dẫn học lập trình web 10</p>
</body>

Xem ví dụ

4) Phương thức định vị absolute

- Phương thức định vị absolute dùng để thiết lập vị trí cho một phần tử dựa theo vị trí của phần tử tổ tiên (được thiết lập thuộc tính position với một trong các giá trị: relative, fixed, absolute) nằm gần với nó nhất, nếu không có phần tử tổ tiên nào được thiết lập thuộc tính position với một trong ba giá trị trên thì vị trí của phần tử sẽ được xác định dựa theo khung trang web.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #a{
           border:1px solid black;
           width:500px;
           height:200px;
           position:relative;
        }
        #test{
            border:1px solid black;
            background-color:yellow;
            position:absolute;
            bottom:0px;
            right:0px;
        }
    </style>
</head>
<body>
    <p>Tài liệu hướng dẫn học Lập Trình Web 01</p>
    <p>Tài liệu hướng dẫn học Lập Trình Web 02</p>
    <div id="a">
        <div id="test">Hello</div>
    </div>
    <p>Tài liệu hướng dẫn học Lập Trình Web 03</p>
    <p>Tài liệu hướng dẫn học Lập Trình Web 04</p>
    <p>Tài liệu hướng dẫn học Lập Trình Web 05</p>
</body>
</html>

Xem ví dụ

- Tương tự với phương phức định vị fixed, nếu chúng ta không thiết lập chiều rộng cho phần tử mà lại sử dụng đồng thời hai thuộc tính left & right thì chiều rộng của phần tử sẽ bị kéo dài từ vị trí left cho đến vị trí right, nếu chúng ta không thiết lập chiều cao cho phần tử mà lại sử dụng đồng thời hai thuộc tính top & bottom thì chiều cao của phần tử sẽ bị kéo dài từ vị trí top cho đến vị trí bottom.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #a{
           border:1px solid black;
           width:500px;
           height:200px;
           position:relative;
        }
        #test{
            border:1px solid black;
            background-color:yellow;
            position:absolute;
            top:10px;
            bottom:10px;
            left:50px;
            right:50px;
        }
    </style>
</head>
<body>
    <p>Tài liệu hướng dẫn học Lập Trình Web 01</p>
    <p>Tài liệu hướng dẫn học Lập Trình Web 02</p>
    <div id="a">
        <div id="test">Hello</div>
    </div>
    <p>Tài liệu hướng dẫn học Lập Trình Web 03</p>
    <p>Tài liệu hướng dẫn học Lập Trình Web 04</p>
    <p>Tài liệu hướng dẫn học Lập Trình Web 05</p>
</body>
</html>

Xem ví dụ