Cách định vị video trong html

Question

Định vị cho phép bạn loại bỏ các phần tử ra khỏi luồng tài liệu thông thường và làm cho chúng hoạt động khác đi, chẳng hạn như bằng cách xếp chồng lên nhau hoặc luôn giữ nguyên vị trí trong khung nhìn của trình duyệt. Bài viết này giải thích các giá trị

position: relative;

8 khác nhau và cách sử dụng chúng

Nội dung chính Show

điều kiện tiên quyết. Khái niệm cơ bản về HTML (nghiên cứu Giới thiệu về HTML) và ý tưởng về Cách thức hoạt động của CSS (nghiên cứu Giới thiệu về CSS. )Khách quan. Để tìm hiểu cách hoạt động của tính năng định vị CSS

Chúng tôi muốn bạn thực hiện các bài tập sau trên máy tính cục bộ của mình. Nếu có thể, hãy lấy một bản sao của

position: relative;

9 từ repo GitHub của chúng tôi (mã nguồn tại đây) và sử dụng nó làm điểm bắt đầu

Định vị cho phép chúng tôi tạo ra các kết quả thú vị bằng cách ghi đè luồng tài liệu thông thường. Điều gì sẽ xảy ra nếu bạn muốn thay đổi một chút vị trí của một số hộp từ vị trí luồng mặc định của chúng để mang lại cảm giác hơi kỳ quặc, đau khổ? . Hoặc điều gì sẽ xảy ra nếu bạn muốn tạo một phần tử giao diện người dùng nổi trên đầu các phần khác của trang và/hoặc luôn nằm ở cùng một vị trí bên trong cửa sổ trình duyệt bất kể trang được cuộn bao nhiêu?

Có một số loại định vị khác nhau mà bạn có thể áp dụng cho các phần tử HTML. Để tạo một loại định vị cụ thể hoạt động trên một phần tử, chúng tôi sử dụng thuộc tính

position: relative;

8

Định vị tĩnh là mặc định mà mọi phần tử có được. Nó chỉ có nghĩa là "đặt phần tử vào vị trí bình thường của nó trong luồng tài liệu — không có gì đặc biệt để xem ở đây. "

Để xem điều này (và thiết lập ví dụ của bạn cho các phần trong tương lai), trước tiên hãy thêm một

top: 30px;
left: 30px;

1 của

top: 30px;
left: 30px;

2 vào

top: 30px;
left: 30px;

3 thứ hai trong HTML

<p class="positioned">…p>

Bây giờ hãy thêm quy tắc sau vào cuối CSS của bạn

.positioned {
  position: static;
  background: yellow;
}

Nếu save và refresh thì sẽ không thấy khác biệt gì cả, ngoại trừ màu nền của đoạn 2 đã được cập nhật. Điều này ổn — như chúng tôi đã nói trước đây, định vị tĩnh là hành vi mặc định

Ghi chú. Bạn có thể xem ví dụ tại thời điểm này trực tiếp tại

top: 30px;
left: 30px;

4 (xem mã nguồn)

Định vị tương đối là loại vị trí đầu tiên chúng ta sẽ xem xét. Điều này rất giống với định vị tĩnh, ngoại trừ một khi phần tử được định vị đã diễn ra trong luồng thông thường, thì bạn có thể sửa đổi vị trí cuối cùng của nó, bao gồm cả việc làm cho nó chồng lên các phần tử khác trên trang. Hãy tiếp tục và cập nhật khai báo

position: relative;

8 trong mã của bạn

position: relative;

Nếu bạn lưu và làm mới ở giai đoạn này, bạn sẽ không thấy kết quả thay đổi gì cả. Vậy làm thế nào để bạn sửa đổi vị trí của phần tử?

top: 30px;
left: 30px;

6,

top: 30px;
left: 30px;

7,

top: 30px;
left: 30px;

8 và

top: 30px;
left: 30px;

9 được sử dụng cùng với

position: relative;

8 để chỉ định chính xác vị trí di chuyển phần tử đã định vị đến. Để dùng thử, hãy thêm các khai báo sau vào quy tắc

position: relative;

05 trong CSS của bạn

top: 30px;
left: 30px;

Ghi chú. Giá trị của các thuộc tính này có thể lấy bất kỳ đơn vị nào mà bạn mong đợi một cách hợp lý. pixel, mm, rems, %, v.v.

Nếu bây giờ bạn lưu và làm mới, bạn sẽ nhận được kết quả như thế này

position: relative;

0

position: relative;

3

Tuyệt nhỉ? . Tại sao nó lại di chuyển xuống dưới cùng và sang phải nếu chúng tôi chỉ định trên cùng và bên trái? . Bạn cần nghĩ về nó như thể có một lực vô hình đẩy mặt xác định của hộp được định vị, di chuyển nó theo hướng ngược lại. Vì vậy, ví dụ: nếu bạn chỉ định

position: relative;

06, thì như thể một lực sẽ đẩy phần trên cùng của hộp, khiến nó di chuyển xuống dưới 30px

Ghi chú. Bạn có thể xem ví dụ tại thời điểm này trực tiếp tại

position: relative;

07 (xem mã nguồn)

Định vị tuyệt đối mang lại kết quả rất khác

Hãy thử thay đổi khai báo vị trí trong mã của bạn như sau

position: relative;

6

Nếu bây giờ bạn lưu và làm mới, bạn sẽ thấy một cái gì đó giống như vậy

position: relative;

7

position: relative;

8

Trước hết, hãy lưu ý rằng khoảng cách nơi phần tử được định vị trong luồng tài liệu không còn nữa — phần tử thứ nhất và thứ ba đã đóng lại với nhau giống như nó không còn tồn tại nữa. Vâng, theo một cách nào đó, điều này đúng. Một phần tử được định vị tuyệt đối không còn tồn tại trong luồng tài liệu thông thường. Thay vào đó, nó nằm trên lớp riêng của nó tách biệt với mọi thứ khác. Điều này rất hữu ích. điều đó có nghĩa là chúng tôi có thể tạo các tính năng giao diện người dùng biệt lập không can thiệp vào bố cục của các phần tử khác trên trang. Ví dụ: hộp thông tin bật lên, menu điều khiển, bảng cuộn qua, các tính năng giao diện người dùng có thể được kéo và thả ở bất kỳ đâu trên trang, v.v.

Thứ hai, lưu ý rằng vị trí của phần tử đã thay đổi. Điều này là do

top: 30px;
left: 30px;

6,

top: 30px;
left: 30px;

7,

top: 30px;
left: 30px;

8 và

top: 30px;
left: 30px;

9 hoạt động theo một cách khác với định vị tuyệt đối. Thay vì định vị phần tử dựa trên vị trí tương đối của nó trong luồng tài liệu thông thường, chúng chỉ định khoảng cách mà phần tử phải đến từ mỗi bên của phần tử chứa. Vì vậy, trong trường hợp này, chúng tôi đang nói rằng phần tử được định vị tuyệt đối phải cách 30px từ trên cùng của "phần tử chứa" và 30px từ bên trái. (Trong trường hợp này, "phần tử chứa" là khối chứa ban đầu. Xem phần bên dưới để biết thêm thông tin)

Ghi chú. Bạn có thể sử dụng

top: 30px;
left: 30px;

6,

top: 30px;
left: 30px;

7,

top: 30px;
left: 30px;

8 và

top: 30px;
left: 30px;

9 để thay đổi kích thước các thành phần nếu cần. Hãy thử đặt

position: relative;

36 và

position: relative;

37 trên các phần tử đã định vị của bạn và xem điều gì sẽ xảy ra. Đặt nó trở lại sau đó…

Ghi chú. Có, lề vẫn ảnh hưởng đến các phần tử được định vị. Tuy nhiên, sự sụp đổ ký quỹ không

Ghi chú. Bạn có thể xem ví dụ tại thời điểm này trực tiếp tại

position: relative;

38 (xem mã nguồn)

Phần tử nào là "phần tử chứa" của một phần tử được định vị tuyệt đối?

Nếu không có phần tử tổ tiên nào có thuộc tính vị trí được xác định rõ ràng, thì theo mặc định, tất cả các phần tử tổ tiên sẽ có vị trí tĩnh. Kết quả của việc này là phần tử được định vị tuyệt đối sẽ được chứa trong khối chứa ban đầu. Khối chứa ban đầu có kích thước của khung nhìn và cũng là khối chứa phần tử

position: relative;

39. Nói cách khác, phần tử được định vị tuyệt đối sẽ được hiển thị bên ngoài phần tử

position: relative;

39 và được định vị so với khung nhìn ban đầu

Phần tử được định vị được lồng vào bên trong

position: relative;

61 trong nguồn HTML, nhưng trong bố cục cuối cùng, phần tử này cách cạnh trên cùng và cạnh trái của trang 30px. Chúng ta có thể thay đổi bối cảnh định vị, nghĩa là phần tử được định vị tuyệt đối được định vị so với phần tử nào. Điều này được thực hiện bằng cách thiết lập định vị trên một trong những tổ tiên của phần tử. với một trong các phần tử mà nó được lồng bên trong (bạn không thể định vị nó so với phần tử mà nó không được lồng bên trong). Để thấy điều này, hãy thêm phần khai báo sau vào quy tắc

position: relative;

62 của bạn

position: relative;

Điều này sẽ cho kết quả sau

.positioned {
  position: static;
  background: yellow;
}

0

.positioned {
  position: static;
  background: yellow;
}

1

Phần tử được định vị hiện nằm so với phần tử

position: relative;

61

Ghi chú. Bạn có thể xem ví dụ tại thời điểm này trực tiếp tại

position: relative;

64 (xem mã nguồn)

Tất cả vị trí tuyệt đối này rất thú vị, nhưng có một tính năng khác mà chúng tôi chưa xem xét. Khi các phần tử bắt đầu chồng lên nhau, điều gì quyết định phần tử nào xuất hiện trên các phần tử khác và phần tử nào xuất hiện dưới các phần tử khác? . Còn khi chúng ta có nhiều hơn một thì sao?

Hãy thử thêm đoạn sau vào CSS của bạn để làm cho đoạn đầu tiên cũng được định vị tuyệt đối

.positioned {
  position: static;
  background: yellow;
}

2

Tại thời điểm này, bạn sẽ thấy đoạn đầu tiên có màu vàng chanh, được di chuyển ra khỏi luồng tài liệu và được đặt ở vị trí cao hơn một chút so với vị trí ban đầu. Nó cũng được xếp chồng lên nhau bên dưới đoạn văn bản gốc

position: relative;

05, nơi hai đoạn chồng lên nhau. Điều này là do đoạn

position: relative;

05 là đoạn thứ hai trong thứ tự nguồn và các phần tử được định vị sau trong thứ tự nguồn sẽ thắng các phần tử được định vị sớm hơn trong thứ tự nguồn

Bạn có thể thay đổi thứ tự xếp chồng? . "z-index" là tham chiếu đến trục z. Bạn có thể nhớ lại các điểm trước trong khóa học mà chúng ta đã thảo luận về các trang web sử dụng tọa độ ngang (trục x) và dọc (trục y) để tìm ra vị trí cho những thứ như hình nền và hiệu ứng bóng đổ. Đối với các ngôn ngữ chạy từ trái sang phải, (0,0) nằm ở trên cùng bên trái của trang (hoặc thành phần) và các trục x và y chạy qua bên phải và xuống dưới trang

Các trang web cũng có trục z. một đường tưởng tượng chạy từ bề mặt màn hình về phía khuôn mặt của bạn (hoặc bất kỳ thứ gì khác mà bạn muốn có ở phía trước màn hình). Giá trị

position: relative;

67 ảnh hưởng đến vị trí của các phần tử được định vị trên trục đó; . Theo mặc định, tất cả các phần tử được định vị đều có

position: relative;

67 của

position: relative;

70, thực tế là 0

Để thay đổi thứ tự xếp chồng, hãy thử thêm khai báo sau vào quy tắc

position: relative;

71 của bạn

.positioned {
  position: static;
  background: yellow;
}

3

Bây giờ bạn sẽ thấy đoạn vôi ở trên cùng

.positioned {
  position: static;
  background: yellow;
}

4

.positioned {
  position: static;
  background: yellow;
}

5

Lưu ý rằng

position: relative;

67 chỉ chấp nhận các giá trị chỉ mục không có đơn vị; . Giá trị cao hơn sẽ vượt lên trên giá trị thấp hơn và bạn sử dụng giá trị nào là tùy thuộc vào bạn. Sử dụng các giá trị 2 hoặc 3 sẽ cho tác dụng tương tự như các giá trị 300 hoặc 40000

Ghi chú. Bạn có thể xem một ví dụ về điều này trực tiếp tại

position: relative;

73 (xem mã nguồn)

Bây giờ chúng ta hãy nhìn vào vị trí cố định. Điều này hoạt động theo cách chính xác giống như định vị tuyệt đối, với một điểm khác biệt chính. trong khi định vị tuyệt đối cố định một phần tử ở vị trí tương đối so với tổ tiên được định vị gần nhất của nó (khối chứa ban đầu nếu không có), định vị cố định thường cố định một phần tử ở vị trí tương ứng với phần hiển thị của chế độ xem. (Một ngoại lệ đối với điều này xảy ra nếu một trong các tổ tiên của phần tử là một khối chứa cố định vì thuộc tính biến đổi của nó có giá trị khác không. ) Điều này có nghĩa là bạn có thể tạo các mục giao diện người dùng hữu ích được cố định tại chỗ, chẳng hạn như các menu điều hướng liên tục luôn hiển thị cho dù trang có cuộn bao nhiêu đi chăng nữa

Hãy đặt cùng một ví dụ đơn giản để hiển thị những gì chúng tôi muốn nói. Trước hết, hãy xóa các quy tắc

position: relative;

71 và

position: relative;

05 hiện có khỏi CSS của bạn

Bây giờ hãy cập nhật quy tắc

position: relative;

62 để xóa khai báo

position: relative;

77 và thêm chiều cao cố định, như vậy

.positioned {
  position: static;
  background: yellow;
}

6

Bây giờ chúng ta sẽ cung cấp phần tử

position: relative;

78 là

position: relative;

79 và đặt nó ở đầu khung nhìn. Thêm quy tắc sau vào CSS của bạn

.positioned {
  position: static;
  background: yellow;
}

7

Cần có

position: relative;

80 để nó dính vào đầu màn hình. Chúng tôi đặt tiêu đề có cùng chiều rộng với cột nội dung, sau đó đặt nền trắng và một số phần đệm và lề để nội dung không hiển thị bên dưới tiêu đề

Nếu bạn lưu và làm mới, bạn sẽ thấy một hiệu ứng nhỏ thú vị là tiêu đề vẫn cố định — nội dung dường như cuộn lên và biến mất bên dưới tiêu đề đó. Nhưng hãy lưu ý cách một số nội dung ban đầu được cắt bớt dưới tiêu đề. Điều này là do tiêu đề được định vị không còn xuất hiện trong luồng tài liệu, vì vậy phần còn lại của nội dung sẽ di chuyển lên trên cùng. Chúng ta có thể cải thiện điều này bằng cách di chuyển tất cả các đoạn xuống dưới một chút. Chúng ta có thể làm điều này bằng cách đặt một số lề trên cho đoạn đầu tiên. thêm cái này ngay bây giờ

.positioned {
  position: static;
  background: yellow;
}

8

Bây giờ bạn sẽ thấy ví dụ đã hoàn thành

.positioned {
  position: static;
  background: yellow;
}

9

position: relative;

0

Ghi chú. Bạn có thể xem một ví dụ về điều này trực tiếp tại

position: relative;

81 (xem mã nguồn)

Có một giá trị vị trí khác có tên là

position: relative;

82, hơi mới hơn các giá trị khác. Về cơ bản, đây là sự kết hợp giữa vị trí tương đối và cố định. Nó cho phép một phần tử được định vị hoạt động giống như nó được định vị tương đối cho đến khi nó được cuộn đến một ngưỡng nhất định (e. g. , 10px từ trên cùng của khung nhìn), sau đó nó sẽ được sửa

Ví dụ: có thể sử dụng định vị dính để làm cho thanh điều hướng cuộn theo trang cho đến một điểm nhất định rồi dính vào đầu trang

position: relative;

1

position: relative;

2

position: relative;

3

Một cách sử dụng phổ biến và thú vị của

position: relative;

82 là tạo một trang chỉ mục cuộn trong đó các tiêu đề khác nhau dính vào đầu trang khi chúng đến trang đó. Đánh dấu cho một ví dụ như vậy có thể giống như vậy

position: relative;

4

CSS có thể trông như sau. Trong luồng thông thường, các phần tử

position: relative;

84 sẽ cuộn theo nội dung. Khi chúng tôi thêm

position: relative;

82 vào phần tử

position: relative;

84, cùng với giá trị 0 của

top: 30px;
left: 30px;

6, các trình duyệt hỗ trợ sẽ dán các tiêu đề lên đầu khung nhìn khi chúng đạt đến vị trí đó. Sau đó, mỗi tiêu đề tiếp theo sẽ thay thế tiêu đề trước đó khi nó cuộn đến vị trí đó

position: relative;

5

.positioned {
  position: static;
  background: yellow;
}

6

position: relative;

4

Các phần tử dính là "dính" so với tổ tiên gần nhất với "cơ chế cuộn", được xác định bởi thuộc tính vị trí của tổ tiên của nó

Ghi chú. Bạn có thể xem ví dụ này trực tiếp tại

position: relative;

88 (xem mã nguồn)

Bạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . định vị

Tôi chắc rằng bạn đã rất vui khi chơi với tính năng định vị cơ bản. Mặc dù đây không phải là phương pháp lý tưởng để sử dụng cho toàn bộ bố cục, nhưng có nhiều mục tiêu cụ thể mà phương pháp này phù hợp với

programming html

Cách định vị video trong html

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội