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

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ó Ngoài ra còn một số thứ linh tinh khác.

như bình thường thì mọi thành phần trong trang sẽ xếp nối đuôi nhau 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é!

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

header{
position:fixed;
}

(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ả

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

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 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

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:

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

(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

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

Lúc này thì thằng object-fit: cover phát huy tác dụng mãnh liệt

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

Thank you for reading!