Chào mọi người, chào mừng trở lại.
Hôm nay, chúng ta sẽ nói về các yếu tố định vị trong trang web của bạn.
Vì vậy, cố gắng để bố trí trang của
bạn và mã hóa của bạn có lẽ sẽ là một trong những tốn thời gian nhất và, có khả năng,
những điều khó chịu mà bạn sẽ làm trong toàn bộ khóa học này.
Và đó là một lý do tại sao tôi đã để lại gần như cả tuần này
để chúng tôi luyện tập các thứ trên trang của bạn.
Bản thân các ý tưởng rất đơn giản và đơn giản, nhưng
đó là việc đặt chúng lại với nhau, khi bạn thêm ngày càng
nhiều vào trang của bạn, nơi mọi thứ có thể trở nên khó khăn một chút.
Vì vậy, hãy bắt đầu nói về các yếu tố định vị khác nhau,
hoặc, các thuộc tính định vị khác nhau, mà bạn có thể sử dụng, được chứ?
Các thuộc tính bốn vị trí là tĩnh, tương đối, tuyệt đối
, và cố định, và phần lớn chúng rất khác nhau.
Cách chúng làm việc cùng nhau, hoặc cách chúng hoạt động, là mỗi một trong số này
cũng có thể được sửa đổi bởi các thuộc tính như trên, phải, dưới và trái.
Vì vậy, bạn nói loại vị trí bạn muốn các yếu tố được, và
sau đó bạn có thể nói, nhưng tôi muốn nó được như vậy xa từ trên cùng hoặc
cao từ phía dưới, hoặc xa hơn từ bên trái.
Vì vậy, chúng ta hãy bắt đầu với tĩnh, và lý do chúng ta sẽ bắt đầu với tĩnh
là bởi vì bạn đã sử dụng nó tất cả cùng.
Đó là cái mà chúng ta gọi là giá trị mặc định cho các phần tử.
Nếu bạn không nói gì khác, nó sẽ được thiết lập cho điều này.
Làm thế nào nó hoạt động là trình duyệt sẽ đặt mỗi phần tử
chỉ ở vị trí có sẵn tiếp theo.
Bạn có thể cung cấp cho nó các giá trị như trên cùng, dưới cùng, trái, và phải, nhưng
trình duyệt sẽ hoàn toàn bỏ qua nó.
Làm thế nào nó sẽ hoạt động là một cái gì đó như thế này.
Để tôi xem tôi có thể vẽ cái này ở đây không.
Có phải bạn đã có màn hình của bạn.
Và sau đó là thời gian để bắt đầu thêm mọi thứ vào trang của bạn, và trình duyệt đi, oh,
tốt đây là khoảng cách vì vậy nó phù hợp ngay tại đây.
Và khoảng thời gian tiếp theo, vì vậy nó vừa ở đây.
Oh, cô ấy có thứ gì đó bị chặn, nên tôi phải xuống đây.
Vì vậy, khi bạn thêm, nó chỉ bắt đầu từ đầu, và làm việc một cách xuyên qua, và sau đó xuống.
Nhưng chúng ta có thể vượt qua điều đó.
Chúng ta có thể thay đổi cách trình duyệt định vị mọi thứ, và
một trong những cách chúng ta có thể làm điều đó là sử dụng vị trí tương đối.
Và khi tôi nói họ hàng, ý tôi là họ hàng với chính nó.
Nó sẽ đi đâu?
Được rồi, chúng ta hãy quét qua một chút.
Nó, về cơ bản, rất giống với vị trí tĩnh, nhưng
bây giờ bạn có thể thêm các bù đắp này.
Vị trí mới, vị trí mới mà chúng ta đặt nguyên tố,
nó sẽ không ảnh hưởng đến bất kỳ hàng xóm nào của nó.
Thay vào đó, những gì nó có thể làm là để lại lỗ hổng
nơi trình duyệt nghĩ rằng nó nên được ở nơi đầu tiên.
Thông thường, các phần tử tương đối có vị trí được sử dụng như các thùng chứa hoặc
khối cho các phần tử khác.
Để tôi chỉ cho các bạn một ví dụ nhanh khác ở đây.
Bật cái này lên.
Tôi đã có cửa sổ trình duyệt của tôi, và chúng ta hãy nói rằng tôi sắp đặt trong một yếu tố span, và
nó sẽ đi ngay ở đó.
Thay vào đó, nếu bạn nói rằng vị trí này là tương đối,
và bạn cho nó một số loại như top 10, thay vì đặt nó ngay đây,
nó thực sự sẽ đi xuống dưới vị trí của nó.
Vì vậy, một lần nữa, chúng tôi chỉ thêm những con số nhỏ để di chuyển mọi thứ từ nơi
mà chúng thường đi.
Vị trí tiếp theo là cái mà chúng ta gọi là tuyệt đối.
Và điều này thực sự có thể gây nhầm lẫn cho mọi người khi bạn khởi động nó lần đầu tiên
, bởi vì trình duyệt, thay vì đặt nó ở vị trí có sẵn tiếp theo, nó
bỏ qua tất cả các yếu tố, và thực sự chỉ nhìn vào container chính nó ở trong.
Trong trường hợp này, chúng tôi sẽ hiển thị một ví dụ với trình duyệt.
Các yếu tố khác trên trang hoạt động như thể nó thậm chí không tồn tại.
Và điều này có thể dẫn đến, là bạn có thể kết thúc với một yếu tố trên đầu trang của một yếu tố khác.
Vậy hãy thử cái này.
Tôi có trình duyệt của mình.
Không có nhiều chỗ ở ở đây.
Vậy ngay đây. Và chúng ta hãy nói rằng tôi đã có một div,
và tôi đã quyết định rằng đó là tuyệt đối, và nó phải là một 100 xuống từ phía trên, và
có thể là một 100 trên.
Vì vậy, nó đi ngay đây.
Được rồi, nếu chúng ta đang làm tương đối,
yếu tố tiếp theo sẽ đi bên dưới nó.
Nhưng nếu chúng ta có hai giá trị tuyệt đối, giá trị kế tiếp sẽ xuất hiện, một
lần nữa, ngay trên đầu trang của nó.
Được rồi, vị trí cuối cùng mà tôi sẽ nói được gọi là cố định.
Và vị trí cố định tương đối với cửa sổ trình duyệt.
Đây là cách họ có thể tạo ra những trang này,
nơi mà đôi khi bạn bật lên, và bạn không thể làm cho nó biến mất.
Bạn tiếp tục cuộn và cuộn, và nó đang theo dõi bạn.
Họ đã làm thế nào là họ đã sử dụng vị trí cố định đó.
Phần tử đó sẽ không di chuyển ngay cả khi cửa sổ được cuộn.
Chỉ cần để bạn biết nếu bạn đang sử dụng một số trình duyệt cũ hơn, hoặc bạn đang cố gắng thiết kế
cho Internet Explorer 7 hoặc 8, điều này chỉ hoạt động nếu bạn đang sử dụng một HTML5 DOCTYPE.
Vì vậy, một lần nữa khi bạn nghĩ về vị trí cố định nghĩ về hộp bật lên
mà chỉ sẽ không biến mất.
Hoặc bạn cũng có thể nghĩ về nó như một cái gì đó hữu ích hơn là khi bạn đang ở
trên một trang, và bạn có thể có thanh điều hướng ở trên cùng, và
khi bạn cuộn qua trang, bạn không cần phải cuộn trở lại để
xem thanh điều hướng, vì nó luôn luôn ở đó.
Vì vậy, chúng ta hãy đi trước và nhìn vào một ví dụ mà tôi đã có một số
yếu tố khác nhau mà sử dụng các thuộc tính vị trí khác nhau.
Okay, tôi sắp cho bạn xem một trang mà tôi đã đi vào, và
tôi đã đưa ra một vài yếu tố.
Chỉ cần hai divs, và một vài đoạn văn.
Và chỉ để bắt đầu, tôi đã cho họ một số phong cách khởi động, chỉ để
chúng tôi có thể phân biệt giữa chúng.
Đối với div của chúng tôi, Tôi vị trí tương đối, Tôi đã cho nó một chiều cao, chiều rộng, và một đường viền.
Đối với các đoạn văn, tôi đã cho nó một đường viền của một màu sắc khác nhau,
cho nó một đầu và trái, và tôi để nó như là vị trí tĩnh,
bởi vì đó là vị trí mặc định nó sẽ luôn luôn được.
Vì vậy, tôi muốn cho bạn thấy nó sẽ trông như thế nào trong trình duyệt.
Vì vậy, nếu bạn nhìn, bạn có thể thấy tôi có hai divs, một ở đây và xuống đây, và
tôi có ba đoạn của tôi.
Một, whoops, xin lỗi.
Một, hai, ba.
Điều đầu tiên tôi muốn chỉ ra là điều này không nhìn chính xác theo cách một số
bạn có thể mong đợi nó trông, hoặc thậm chí chính xác cùng một cách một số bạn có thể nhìn thấy nó nếu
bạn tải nó trên trình duyệt của bạn.
Thay vì đặt đoạn này tất cả các cách ở trên cùng,
nó thực sự bị đẩy xuống một chút.
Tương tự cho B và C.
Lý do xảy ra là bởi vì tất cả các trình duyệt có giá trị mặc định khác nhau cho
nơi đoạn văn nên được định vị.
Vậy, để tôi cuộn qua đây một chút.
Tôi sẽ xuống đây.
Và bạn có thể thấy rằng có một mã kỳ lạ ngay đây mà nói,
-webkit- margin-before và -webkit-margin-after.
Đây là một ví dụ về một số lớp giả mà họ đã sử dụng.
Vì vậy, tôi không muốn những điều mặc định khác nhau được đưa vào chơi.
Vì vậy, tôi sẽ đi trước và loại bỏ chúng.
Sau khi tôi bình luận và bình luận rằng trở lại, tôi làm mới, và
bây giờ chúng tôi đã có A, B và C của chúng tôi
Vì vậy, một lần nữa, A, B, và C, tất cả đều tương đối.
Bạn đang nói với trình duyệt, chỉ cần đặt nó trong không gian có sẵn tiếp theo.
Vì vậy, chúng ta hãy xem những gì sẽ xảy ra bây giờ nếu tôi thay đổi phần tử của tôi
từ tương đối sang tĩnh, hoặc xin lỗi, từ tĩnh sang tương đối.
Và bạn có thể thấy rằng họ đã chuyển qua, và
lý do họ chuyển qua đó là tôi đã cho nó những giá trị của top 100 và còn lại 100.
Xuống, đẩy lên.
Nếu tôi thay đổi nó thành 50.
Oops, 59, được rồi.
Bạn có thể thấy không di chuyển nhiều như vậy.
Vì vậy, tĩnh chỉ cần đi ở nơi đầu tiên bạn có thể.
Tương đối, đi ở nơi đầu tiên bạn có thể, nhưng đi trước,
bạn có thể nói nếu bạn muốn nó di chuyển qua một chút theo hai hướng.
Điều tiếp theo mà chúng ta sẽ làm là tuyệt đối.
Có thể.
Chúng ta đi rồi, vì vậy bây giờ tôi muốn các bạn chú ý một điều gì đó.
Cái A và cái B đó, chúng đứng trên nhau.
Bởi vì bạn đã nói, tôi muốn bạn là 100 pixel xuống và
59 pixel off từ phía bên của phần tử container.
Trong trường hợp này, đó là div đó.
Vì vậy, đây là kỳ quặc vì họ ở ngay trên đầu trang của nhau, và tất cả đều trộn lẫn với nhau.
Có những trường hợp mà bạn sẽ muốn mọi thứ được trên đầu trang của nhau.
Có lẽ một trong số chúng sẽ được nhìn thấy, và
một trong số chúng sẽ được giấu đi, và chúng sẽ thay đổi một cách tự động.
Nhưng đây là những gì xảy ra với tuyệt đối.
Bây giờ, nếu tôi cuộn, tôi sẽ làm cho màn hình này nhỏ hơn một chút, và tôi cuộn,
bạn có thể thấy rằng A và B, chúng sẽ cuộn đi.
Và, tất nhiên, tôi đã làm ví dụ này bởi vì tôi muốn cho bạn thấy rằng nếu tôi chuyển đổi
này để cố định bây giờ, thay vì nói vị trí các yếu tố liên quan
đến cha mẹ của nó, nói vị trí này yếu tố liên quan đến toàn bộ trình duyệt.
Vì vậy, bây giờ tất cả mọi thứ trên đầu trang của nhau, và nếu tôi cố gắng để di chuyển đi.
Nó không hiệu quả.
Nó ở ngay đó, được chứ?
Vì vậy, một lần nữa, nó là tĩnh, tương đối, tuyệt đối, và cố định.
Và tôi muốn bạn chơi với những thứ này, và biết các lựa chọn của bạn,
trước khi bạn bắt đầu đặt ra mã của bạn bằng tay.
Bây giờ, một trong những điều tôi cho các bạn thấy là có thể cho
nhiều yếu tố được đặt ở cùng một vị trí hoặc trên cùng của nhau.
Và có một cách để đối phó với điều đó nếu bạn không thích thứ tự mà họ đang
xuất hiện.
Và đó được gọi là chỉ số Z.
Z-index chỉ là, về cơ bản, chỉ là một giá trị số, nó là tích cực hoặc
tiêu cực, mà nói với trình duyệt thứ tự xếp chồng của bạn.
Vì vậy, nếu bạn có một cái gì đó và bạn thực sự chắc chắn rằng bạn muốn chắc chắn rằng nó luôn luôn
ở trên, bạn sẽ đi trước và đặt một cái gì đó như 100 vào nó.
Nếu anh không thực sự quan tâm, anh có thể cho nó một âm 100.
Và đây là cách mà mọi người có thể đi trước, và
vị trí các yếu tố để trở nên năng động hơn một chút sau đó,
khi chúng ta thêm một số JavaScript hoặc những thứ khác nhau như thế.
Vì vậy, Z-index là một cái gì đó mà không phải là rất nhiều người mã với, nhưng
nó thực sự hữu ích khi bạn đang sử dụng yếu tố kiểm tra,
nếu có một cái gì đó dưới đây, và bạn muốn xem những gì nó trông giống như trên đầu trang.
Vì vậy, chúng ta hãy đi trước và xem xét.
Định vị phần tử của bạn là chìa khóa để tạo ra các bố cục mà bạn
muốn có.
Và điều này đặc biệt quan trọng nếu bạn lo lắng về trang web của bạn trông tốt trên
một màn hình nhỏ, một màn hình lớn, vv
Vì vậy, lập kế hoạch thích hợp sẽ làm cho điều này dễ dàng hơn cho
bạn khi nói đến thời gian để lập trình trang của bạn.
Nhưng thực sự, điều quan trọng nhất bạn có thể làm ngay bây giờ là truy cập trực tuyến, tìm những
hướng dẫn hoặc tài liệu tham khảo khác nhau mà họ nói về định vị, và chơi với
nó cho đến khi bạn cảm thấy thoải mái hơn một chút với cách thức hoạt động của mỗi công việc này.
Chúc may mắn.