Bài 14: Position

✦ Nguyên lý hoạt động của position:
Hãy tưởng tượng cửa sổ trình duyệt của bạn giống như một hệ tọa độ và với position bạn có thể đặt một đối tượng web ở bất cứ vị trí nào trên hệ tọa độ này.


Giả sử chúng ta muốn định vị một ảnh ở vị trí 70px cách đỉnh và 90px từ bên trái tài liệu, chúng ta sẽ viết CSS như sau:
img { position:absolute; top:70px; left:90px }

1. Static
- Định vị với giá trị static là cách mặc định mà một phần tử sẽ xuất hiện trong tài liệu (X)HTML của bạn. Kể cả khi bạn không khai báo position cho phần tử thì mặc định nó vẫn có giá trị static.
p {
    position: static;
  }
2. Relative
- Sự định vị tương đối cho một thành phần là sự định vị được tính từ vị trí gốc trong tài liệu. Các thành phần đã được định vị tương đối sẽ để lại khoảng không trong tài liệu. Các thành phần được định vị tương đối sẽ nhận giá trị position là relative.
p {
    position: relative;
    top: -20px;
    left: 20px;
  }

3. Absolute
- Định vị tuyệt đối là sự định vị mà trong đó các thành phần được định vị không để lại bất cứ một khoảng trống nào trong tài liệu. Một thành phần được định vị tuyệt đối sẽ nhận giá trị position là absolute. Các đối tượng đã định vị tuyệt đối sẽ dùng kết hợp với các thuộc tính top, left, right, bottom để xác định tọa độ.

Ví dụ: đặt bốn ảnh ở bốn góc tài liệu bằng định vị tuyệt đối.
#logo1 { 
         position:absolute; 
         top:50px; 
         left:70px 
       }
#logo2 { 
         position:absolute; 
         top:0; 
         right:0
       }
#logo3 { 
         position:absolute; 
         bottom:0; 
         left:0 
       }
#logo4 { 
         position:absolute; 
         bottom:70px; 
         right:50px 
       }

4. Fixed
- Sử dụng để cố định 1 thành phần so với cửa sổ trình duyệt, khi kéo thanh cuộn thì thành phần đó vẫn được cố định so với trình duyệt.
- fixed hay được sử dụng để tạo các thành phần cố định như quảng cáo, các nút bấm,...
Ví dụ:
p {
    position: fixed;
    top: 30px;
    left: 20px;
}

5. Inherit
- Sử dụng inherit thuộc tính sẽ được thừa hưởng từ thành phần cha (thành phần bao ngoài)
position: inherit;

DXOan

Đây chính là tôi với sự bùng nổ của những giấc mơ. Tôi thích khám phá và chia sẻ những điều mới mẻ. Hãy đồng hành cùng tôi nhé ! 😁😘😍 - Con đường tôi đi là con đường tôi chọn - 😎😂✌ facebook twitter pinterest youtube external-link

Đăng nhận xét

Vui lòng đưa ra những nhận xét tích cực, mang tính xây dựng.*

Mới hơn Cũ hơn

AdBlock Detected!

Phát hiện trình duyệt đang sử dụng AdBlock. Vui lòng tắt AdBlock để có thể xem nội dung cũng như ủng hộ tác giả. DXOan xin cảm ơn. Chúc bạn một ngày vui vẻ !