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

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

– 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:

position
top
right
bottom
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>
    <p style="font-size:20px;line-height:30px">- <u>GIẢI THÍCH</u>: Như các bạn đã thấy, đối với phương thức định vị static, 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ử #test.</p>
</body>
</html>

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.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #test{
            border:1px solid black;
            background-color:pink;
            position:relative;
            top:6px;
            left:17px;
        }
    </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>

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.

– Đố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.

<!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>
    <p>Tài liệu hướng dẫn học lập trình web 11</p>
    <p>Tài liệu hướng dẫn học lập trình web 12</p>
    <p>Tài liệu hướng dẫn học lập trình web 13</p>
    <p>Tài liệu hướng dẫn học lập trình web 14</p>
    <p>Tài liệu hướng dẫn học lập trình web 15</p>
    <p>Tài liệu hướng dẫn học lập trình web 16</p>
    <p>Tài liệu hướng dẫn học lập trình web 17</p>
    <p>Tài liệu hướng dẫn học lập trình web 18</p>
    <p>Tài liệu hướng dẫn học lập trình web 19</p>
    <p>Tài liệu hướng dẫn học lập trình web 20</p>
    <p>Tài liệu hướng dẫn học lập trình web 21</p>
    <p>Tài liệu hướng dẫn học lập trình web 22</p>
    <p>Tài liệu hướng dẫn học lập trình web 23</p>
    <p>Tài liệu hướng dẫn học lập trình web 24</p>
    <p>Tài liệu hướng dẫn học lập trình web 25</p>
    <p>Tài liệu hướng dẫn học lập trình web 26</p>
    <p>Tài liệu hướng dẫn học lập trình web 27</p>
    <p>Tài liệu hướng dẫn học lập trình web 28</p>
    <p>Tài liệu hướng dẫn học lập trình web 29</p>
    <p>Tài liệu hướng dẫn học lập trình web 30</p>
    <p>Tài liệu hướng dẫn học lập trình web 31</p>
    <p>Tài liệu hướng dẫn học lập trình web 32</p>
    <p>Tài liệu hướng dẫn học lập trình web 33</p>
    <p>Tài liệu hướng dẫn học lập trình web 34</p>
    <p>Tài liệu hướng dẫn học lập trình web 35</p>
    <p>Tài liệu hướng dẫn học lập trình web 36</p>
    <p>Tài liệu hướng dẫn học lập trình web 37</p>
    <p>Tài liệu hướng dẫn học lập trình web 38</p>
    <p>Tài liệu hướng dẫn học lập trình web 39</p>
    <p>Tài liệu hướng dẫn học lập trình web 40</p>
    <p>Tài liệu hướng dẫn học lập trình web 41</p>
    <p>Tài liệu hướng dẫn học lập trình web 42</p>
    <p>Tài liệu hướng dẫn học lập trình web 43</p>
    <p>Tài liệu hướng dẫn học lập trình web 44</p>
    <p>Tài liệu hướng dẫn học lập trình web 45</p>
    <p>Tài liệu hướng dẫn học lập trình web 46</p>
    <p>Tài liệu hướng dẫn học lập trình web 47</p>
    <p>Tài liệu hướng dẫn học lập trình web 48</p>
    <p>Tài liệu hướng dẫn học lập trình web 49</p>
    <p>Tài liệu hướng dẫn học lập trình web 50</p>
</body>
</html>

– 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.

<!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>
    <p>Tài liệu hướng dẫn học lập trình web 11</p>
    <p>Tài liệu hướng dẫn học lập trình web 12</p>
    <p>Tài liệu hướng dẫn học lập trình web 13</p>
    <p>Tài liệu hướng dẫn học lập trình web 14</p>
    <p>Tài liệu hướng dẫn học lập trình web 15</p>
    <p>Tài liệu hướng dẫn học lập trình web 16</p>
    <p>Tài liệu hướng dẫn học lập trình web 17</p>
    <p>Tài liệu hướng dẫn học lập trình web 18</p>
    <p>Tài liệu hướng dẫn học lập trình web 19</p>
    <p>Tài liệu hướng dẫn học lập trình web 20</p>
    <p>Tài liệu hướng dẫn học lập trình web 21</p>
    <p>Tài liệu hướng dẫn học lập trình web 22</p>
    <p>Tài liệu hướng dẫn học lập trình web 23</p>
    <p>Tài liệu hướng dẫn học lập trình web 24</p>
    <p>Tài liệu hướng dẫn học lập trình web 25</p>
    <p>Tài liệu hướng dẫn học lập trình web 26</p>
    <p>Tài liệu hướng dẫn học lập trình web 27</p>
    <p>Tài liệu hướng dẫn học lập trình web 28</p>
    <p>Tài liệu hướng dẫn học lập trình web 29</p>
    <p>Tài liệu hướng dẫn học lập trình web 30</p>
    <p>Tài liệu hướng dẫn học lập trình web 31</p>
    <p>Tài liệu hướng dẫn học lập trình web 32</p>
    <p>Tài liệu hướng dẫn học lập trình web 33</p>
    <p>Tài liệu hướng dẫn học lập trình web 34</p>
    <p>Tài liệu hướng dẫn học lập trình web 35</p>
    <p>Tài liệu hướng dẫn học lập trình web 36</p>
    <p>Tài liệu hướng dẫn học lập trình web 37</p>
    <p>Tài liệu hướng dẫn học lập trình web 38</p>
    <p>Tài liệu hướng dẫn học lập trình web 39</p>
    <p>Tài liệu hướng dẫn học lập trình web 40</p>
    <p>Tài liệu hướng dẫn học lập trình web 41</p>
    <p>Tài liệu hướng dẫn học lập trình web 42</p>
    <p>Tài liệu hướng dẫn học lập trình web 43</p>
    <p>Tài liệu hướng dẫn học lập trình web 44</p>
    <p>Tài liệu hướng dẫn học lập trình web 45</p>
    <p>Tài liệu hướng dẫn học lập trình web 46</p>
    <p>Tài liệu hướng dẫn học lập trình web 47</p>
    <p>Tài liệu hướng dẫn học lập trình web 48</p>
    <p>Tài liệu hướng dẫn học lập trình web 49</p>
    <p>Tài liệu hướng dẫn học lập trình web 50</p>
</body>

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.

<!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:23px;
            right:77px;
        }
    </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>

– 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.

<!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>