cùng xoắn não với các thuộc tính position, z-index, background-attachment, object-fit
CSS3
52
CSS
40
White

mòe viết ngày 30/06/2018

Khi học CSS, hẳn là ai trong chúng ta đều bối rối khi không biết cái thuộc tính position có nghĩa là gì, huống hồ là dùng như thế nào. Đừng lo, trong bài này mình sẽ lôi ra những cách sử dụng chủ yếu cho cái thuộc tính này và khiến bạn yêu nó :heart: Ngoài ra còn một số thứ linh tinh khác.

position

như bình thường thì mọi thành phần trong trang sẽ xếp nối đuôi nhau :grin: từ trên xuống dưới, hết cái này đến cái kia, không ai xâm phạm dính líu đến ai. Nhưng đột nhiên bạn muốn 1 thành phần nào đó vượt biên, nằm ngoài vòng pháp luật hoặc nhảy chồng lên mặt nhau ngồi hay núp lùm sau ai đó, túm lại là đảo lộn hết mọi thứ lên (một cách có nghệ thuật) thì sẽ xài tới position.

Một điều chú ý là hãy sử dụng position chỉ khi thật sự cần, bởi vì một khi element đã xổng chuồng thì hơi khó xử lí hơn một tẹo, nếu chưa nắm vững thì sẽ gây phiền toái nhiều hơn là giúp ích.

Để bài dễ hiểu và dễ sử dụng dành cho các bạn mới tiếp cận, thay vì giải thích xem position relative, absolute, fixed, z-index, overflow... là gì, mình sẽ đi luôn vào một vài trường hợp tiêu biểu và thường xuyên phải sử dụng, và để tránh tẩu hỏa nhập ma nên sẽ đơn giản hóa một số kiến thức, khuyến nghị sau khi thành thạo các bạn hãy tìm hiểu thêm để hiểu đầy đủ hơn về mớ này nhé! :heart:

thanh header nằm yên một chỗ

có thể nói đây là ca dễ hiểu nhất trong bài.

header{
position:fixed;
}

chữ đè lên ảnh

alt text

(các bạn có thể áp dụng cho các trường hợp kháctương tự như: ảnh đè ảnh, div đè div...v...v)

Gọi cái div bao lấy cả chữ cả ảnh là .baoboc, ảnh là img, chữ là .text

.baoboc{
position: relative;
}
.text{
position:absolute;
top:20px;
left:20px;
}

2 điều cần chú ý:

khi 1 element có thuộc tính position thì có thể xài top, bottom, left, right để đẩy nó qua lại. Điều này là không thể đối với các element không có thuộc tính position nhưng nhiều bạn vẫn đưa vào có lẽ do nhầm nhọt.

nếu parent div không có position relative thì parent child dẫu có position absolute thì cũng không nghĩa lý gì cả

quyết định cái nào đứng sau lưng cái nào

alt text

element có z-index bé hơn thì nằm sau lưng z-index lớn hơn

2 điều cần lưu ý:

nếu element không có position relative thì dẫu có z-index tới lui cũng không có tác dụng

hiệu ứng parallax cho trang

Ví dụ ở trang web sau đây, ở ảnh banner thì khi bạn scroll chỉ có chữ chạy chứ ảnh không chạy

Mục đích của việc này là để cho hay thôi :laughing: Cách làm khá đơn giản nhưng lại tạo hiệu ứng nguy hiểm, khá hữu ích.

Cách làm là tạo 1 div chứa chữ, rồi áp dụng background-attachment: fixed cho div đó

div{
background-image: url("điền url ở đây");
background-attachment: fixed;
background-size: cover;
}

background-size: cover giúp kéo căng ảnh nhưng không móp méo, mình thấy cái này khá tiện. Mỗi khi set background mà nhỡ may nhỏ hơn div thì nó bị repeat khá là nhức mắt, mà to hơn div thì lại chỉ hiện được có 1 góc của ảnh.

Chú ý:

Set background cho div thì hình ảnh ở đây không phải một thẻ <img> cho nên chiều cao của ảnh sẽ phụ thuộc vào chiều cao của div. Nếu div ít chữ thì ảnh ngắn tủn, không hiển thị hết, ví dụ như này

alt text

Muốn cho nó tăng chiều cao thì chớ liều mình set height cho div vì nhìn sơ qua thì tưởng là ngon:
alt text

Đến lúc co màn hình lại mới đắng:
alt text

(well không bao giờ lại có cái smartphone mà màn hỉnh vừa nhỏ vừa dài lởm thế này nhưng mình minh họa vậy thôi nhé, tuy nhiên hiểm họa này là hoàn toàn có thật)

Thế không set height được thì làm gì?

Thì set padding cho div là biện pháp an toàn

alt text

muốn ảnh trong web đều nhau mà ảnh gốc thì mỗi cái một size

alt text
khi đó việc cắt từng ảnh một gây mất thời gian, mà set height và width nghiêm túc cho img thì lại méo mó hết cả, trông rất kém sang:

alt text

Lúc này thì thằng object-fit: cover phát huy tác dụng mãnh liệt
alt text
nó sẽ cắt cúp đầu đuôi đi để cho vừa với kích thước thay vì kéo dãn.

Còn thắc mắc là nếu cắt cúp sẽ mất đi một góc của ảnh, vậy giải quyết như nào... well, chụp lại loạt ảnh khác cho đồng đều tỉ lệ thôi chứ như nào, đến nước này thì chịu, css chỉ giải quyết được đến vầy thôi, haha :laughing:


Thank you for reading!

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

mòe

13 bài viết.
171 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
56 37
google cách học tốt tiếng anh thì ra hàng đống kết quả nhưng đảm bảo không có cái nào dùng được (nếu dùng được thì bạn đã tiến bộ rồi phải không). ...
mòe viết 4 tháng trước
56 37
White
38 27
Bài này không nhằm chê freecodecamp, thậm chí còn khen nhé :v Trong bài có sử dụng sự trợ giúp của các bạn Hồ Xuân Diễn, Robin Huy, Anh Nguyễn, Da...
mòe viết 4 tháng trước
38 27
White
35 14
Trước đây việc dàn bố cục trang (layout) chủ yếu dựa vào những công cụ thô sơ thời đồ đá, ví dụ để cho 2 đoạn văn ở 2 bên của trang thì người ta sẽ...
mòe viết 4 tháng trước
35 14
Bài viết liên quan
White
18 10
Lời nói đầu Tuần trước mình đã bắt tay vào làm thử app theo ý tưởng clone chương trình "Ai là triệu phú" trên TV, với các chức năng cơ bản, chỉ sử...
Andy Crush viết hơn 2 năm trước
18 10
White
27 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết gần 3 năm trước
27 8
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
13 bài viết.
171 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!