Vị trí phần tử position CSS

Vị trí các 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>

Ví dụ về fixed

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ể đè nê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.