Cách dùng position trong css làm sản phẩm mới

Nội dung bài viếtNhư các bạn biết, khi làm việc với lập trình web, một khi các bạn đã có được các phần tử web. Các bạn sẽ cần thao tác thêm rất nhiều các bước nữa để trang web được hoàn thiện nhất có thể. Và bước làm anh muốn nhắc đến ở đây là đặt các phần tử web vô những vị trí mà chúng ta mong muốn để bố cục trang web rõ ràng hơn, nội dung dễ đọc hơn, trang web hoạt động tối ưu nhất. Trong lập trình web CSS để làm được việc này, chúng ta sẽ sử dụng đến thuộc tính position.
Trong bài viết này, anh sẽ giúp các bạn hiểu được thuộc tính position trong lập trình web là gì? Những vị trí nào chúng ta có thể sắp xếp phần tử web vào? Và cách làm như thế nào để thao tác với những vị trí relative, static, absolute, fix và sticky. Anh sẽ lấy cụ thể các ví dụ minh hoạ cách thao tác để hướng dẫn các bạn thực hiện được những vị trí đó trong lập trình web.

1. Position là gì

Chúng ta sử dụng thuộc tính position để đặt các phần tử web ở vị trí mình mong muốn. Trong CSS chúng ta có những vị trí như relative, static, absolute, fix và sticky

2. Position static

Đây là vị trí mặc định khi một thành phần web được tạo ra. Chúng ta khai báo như sau position: static

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23








position: static;

An element with position: static; is not positioned in any special way; it is 
always positioned according to the normal flow of the page:

 class="static">
  This div element has position: static;

3. Position relative

Chúng ta sử dụng position là relative khi chúng ta muốn phần tử web được tạo ra cách bên trái, phải, trên, dưới so với vị trí mặc định ban đầu. Ví dụ div sau khi được tạo ra nó sẽ cách lề trái 30px

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23








position: relative;

An element with position: relative; is positioned relative to its normal position:

 class="relative">
This div element has position: relative;

4. Position fix

Chúng ta sử dụng position fix khi chúng ta muốn cố định phần tử trên trang web. Có thể cố định phía trên, dưới, trái hoặc phải

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25








position: fixed;

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:

 class="fixed">
This div element has position: fixed;

5. Position absolute

Chúng ta sử dụng position absolute để canh chỉnh các phần tử con bên trong phần tử cha

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33








position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):

 class="relative">This div element has position: relative;
   class="absolute">This div element has position: absolute;

6. Position sticky

Chúng ta sử dụng position sticky để cố định phần tử khi người dùng kéo nội dung của trang web thì các phần tử sticky vẫn không di chuyển mà cố định cho người dùng.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30








Try to scroll inside this frame to understand how sticky positioning works.
Note: IE/Edge 15 and earlier versions do not support sticky position.

 class="sticky">I am sticky!

 style="padding-bottom:2000px">
  
In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.
  
Scroll back up to remove the stickiness.
  
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
  
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Trong ví dụ trên người dùng dù có kéo thanh scroll bar thì chữ I am sticky vẫn ở trên cùng và cố định cho dù người dùng có kéo thanh cuộn xuống.

7. Demo Video

8. Thực hành online và source code

---

Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây