Khóa học CSS - Bài 18 - Thuộc tính position

Quay về MỤC LỤC TỰ HỌC CSS

Thuộc tính position dùng để di chuyển 01 phần tử mà không ảnh hưởng đến bố cục của trang web.Ta dùng nó kết hợp với các thuộc tính top, left, right, bottom.

Thuộc tính position có các giá trị sau:

·         static

·         relative

·         absolute

·         fixed

·         sticky

1. static

Đây là giá trị mặc định. Khi đặt position ở giá trị này, các thiết lập thuộc tính top, left, right, bottom của phần tử là vô giá trị.

Ví dụ:

div.static {
    position: static;
    border: 3px solid #73AD21;
}

2. relative

Giá trị này kết hợp với các thuộc tính top, bottom, left, right sẽ làm thay đổi vị trí của phần tử nhưng vẫn chừa 01 khoảng trống ngay vị trí mặc định.

Ví dụ:

img {
    position: relative;
    top: 100px;

    width: 10%;

    height: 10%;
}

div {
    border: 3px solid green;
}

và các giá trị trong phần body

<img src="hinh\linh.jpg">

<div>Lớp học vi tính .COM</div>

3. absolute

Thường dùng cho phần tử bên trong phần tử mẹ có thuộc tính relative.

Phần tử có thuộc tính absolute kết hợp với các thuộc tính top,left,bottom, right sẽ có vị trí thay đổi so với phần tử mẹ (phần tử chứa nó gần nhất).

Ví dụ:

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
}

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

và các giá trị HTML trong phần body.

<div class="relative">Phần tử mẹ

<div class="absolute">Phần tử con</div>

</div>

4. fixed

Gắn phần tử ở 01 vị trí cố định cho dù trình duyệt cuốn đến đâu đi nữa.

Thường dùng hiển thị phần quảng cáo khuyến mãi, thông tin đặc biệt.

Ví dụ:

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}

5. sticky

Kết hợp với thuộc tính top:0 -> Đính 01 phần tử lên vị trí top:0 của màn hình.

Thường dùng để đính menu trang web.

Ví dụ:

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}

6. z-index

Khi các đối tượng nằm đè lên nhau, ta dùng thuộc tính z-index để xác định đối tượng nào nằm trên –dưới.

Ví dụ:

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

.container {
    position: relative;
}

Và các giá trị HTML trong phần body

<div class="container">

<img src="hinh\linh.jpg" width="100%">

<p>Hình của LINH</p>

</div>

Ví dụ sau đây tấm hình linh.jpg sẽ nằm dưới chữ “Hình của LINH”

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

Quay về MỤC LỤC TỰ HỌC CSS

Tác giả: #drM

Nguồn: Sưu Tầm