Đang tải...

Hòa Nguyễn Thanh

https://github.com/xuanphao19


12

Căn chỉnh mọi phần tử với thuộc tính position?

Hòa Nguyễn Thanh
Hòa Nguyễn Thanh

4 năm trước · 2 phút đọc

fullstack.edu.vn Học lập trình để đi làm.

Chào các bạn!

Như tiêu đề bài viết mình đã nêu. Thuộc tính position có thể giúp bạn căn chỉnh mọi phần tử với mọi vị trí khác nhau.

Vậy bạn đã thực sự làm chủ thuộc tính này chưa hãy cùng mình thảo luận những tính năng hay ho mà nó mang lại trong quá trình thiết kế và xây dưng bố cục trang nhé!

Bài viết được chia làm 4 phần chính:

1 Thuộc tính position và các giá trị.

2 Căn chỉnh phần tử (position) với (top, right, bottom, left)?

3 Căn chỉnh phần tử (position) với hàm translate();

4 Căn chỉnh phần tử (position) với margin auto?

I/. Thuộc tính position và các giá trị.

a_position.png

b_static.png

c_relative.png

d_absolute.png

fixed.png

g_sticky.png

II/. Căn chỉnh phần tử (position) với (top, right, bottom, left)?

Top_right_bottom_lef.png

tp_size.png

III/. Căn chỉnh phần tử (position) với hàm translate();

translate.png

tz_center.png

VI/. Căn chỉnh phần tử (position) với margin auto?

za_margin_auto.png

zz_item-center .png

Hy vọng qua bài viết các bạn một lần nữa ôn lại những kiến thức về thuộc tính position của phần tử và thực sự làm chủ nó!

Chúc các bạn sức khỏe và học tốt!