Cách xác định vị trí phần tử với thuộc tính position trong CSS

[PVS]

Cách xác định vị trí phần tử với thuộc tính position trong CSS

Trong CSS, các bạn có thể sử dụng thuộc tính position với các giá trị static, fixed, relative, absolute để xác định vị trí phần tử.

Các thuộc tính CSS về vị trí phần tử giúp định vị phần tử trong trang, nó cũng sắp xếp phần tử này sau phần tử khác, và chỉ cách ứng xử khi nội dung phần tử quá lớn. Các phần tử định vị bằng cách sử dụng thuộc tính: top bottom left right

Tất nhiên các thuộc tính này không làm việc nếu thuộc tính position không thiết lập trước đó.

position:static
Các phần tử đều nhận giá trị mặc định là static, giá trị này cho biết vị trí phần tử tuân theo luồng thứ tự trong trang. Khi phần tử có thuộc tính position:static thì các thuộc tính top bottom left right không có ảnh hưởng

<style>
    p.position_static {
        position:static;
        top: 30px;
        right: 5px;
        color: red;
    }
</style>

<div class="card">
    <p>Paragraph with no position.</p>
    <p>Paragraph with no position.</p>
    <p class="position_static">This paragraph has a static position.</p>
</div>

​

Bạn thấy ví dụ trên khi là static thì top, right không có tác dụng.

position: fixed
Vị trí phần tử nếu thiết lập là fixed thì nó định vị dựa vào cửa sổ trình duyệt, và không thay đổi kể cả khi bạn cuộn trang. top bottom left right thiết lập khoảng cách về phần tử tới các cạnh cửa sổ trình duyệt.

<style>
    p.position_fixed {
        position: fixed;
        top: 30px;
        right: 5px;
        color: red;
    }
</style>
<p class="position_fixed">Ví dụ về fixed</p>

position: relative
Một phần tử thiết lập vị trí là relative thì nó có vị trí tương đối. Thuộc tính top bottom left right chỉ ra khoảng cách dịch chuyển khi dựng: Nội dung của phần tử có thể di chuyển và có thể đè lên phần tử khác, nhưng không gian dành cho phần tử lúc đầu vẫn được giữ nguyên.

<style>
    .relativetest p {
        width: 350px;
        border: 1px black solid;
    }
    .relativetest p span {
        background: green;
        color:white;
        position: relative;
        top: 50px;
        left: 50px;
    }
</style>
<div class="relativetest">
    <p><span>CSS Selector</span> dùng để xác định đoạn mã
    <span>CSS</span> tương ứng được bao trong phần từ
    <span>{ đến }</span> sẽ được áp dụng cho
    những thành phần nào trong trang Web.</p>
</div>

​

Nhớ là giá trị này không sử dụng cho table cells, columns, column groups, rows, row groups, or captions

position: absolute
Thiết lập vị trí dạng absolute thì nó định vị tương đối với phần tử cha đầu tiên có dạng khác static. Kiểu absolute loại bỏ luồng theo cách bình thường.

Chúc các bạn thành công.

Nguồn: Internet​