Danh Mục Bài Viết
Ok anh em, Tiếp theo trong chuyên mục học nhanh Css cùng Minacode. Bài này mình sẽ nói về một khái niệm rất hay và hữu ích trong Css là Position và các thuộc tính của nó như static, relative, fixed, absolute, sticky và z-index. Nào Let's go thôi!
Thuộc tính position chỉ định loại định vị được sử dụng cho một phần tử. Có năm kiểu định vị khác nhau:
Sau khi có được kiểu định vị, các phần tử sẽ được định vị bằng các thuộc tính top, bottom, left và right. Các bạn lưu ý là những thuộc tính này sẽ không hoạt động trừ khi position thuộc tính đó được đặt trước.
Các phần tử trong Html được định vị static theo mặc định và không bị ảnh hưởng bởi các thuộc tính top, bottom, left và right.
Một phần tử có position: relative sẽ được định vị so với vị trí bình thường của nó. Việc đặt các thuộc tính top, bottom, left và right của một phần tử có vị trí relative sẽ khiến phần tử đó bị điều chỉnh thay đổi so với vị trí bình thường. Nội dung khác sẽ không được điều chỉnh để phù hợp với bất kỳ khoảng trống nào mà phần tử để lại.
Một phần tử có position: fixed được định vị tương ứng với khung màn hình của bạn, có nghĩa là nó luôn ở cùng một vị trí ngay cả khi trang được cuộn xuống. Các thuộc tính top, bottom, left và right được sử dụng để định vị phần tử này. Một phần tử có position: fixed không để lại khoảng trống trên trang nơi nó được đặt.
Một phần tử có position: absolute được định vị tương ứng so với phần tử cha được định vị relative gần nhất (thay vì được định vị tương đối với khung nhìn, như position: fixed). Tuy nhiên, nếu không có phần tử cha nào của nó được định vị, nó sẽ định vị theo cửa sổ trình duyệt và di chuyển cùng với việc cuộn trang.
Lưu ý: Các phần tử được định vị position: absolute sẽ bị xóa khỏi vị trí ban đầu và có thể chồng lên các phần tử khác.
Một phần tử có position: sticky được định vị dựa trên vị trí cuộn của người dùng. Phần tử này sẽ chuyển đổi giữa relative và fixed, tùy thuộc vào vị trí cuộn. Nó được định vị tương đối cho đến khi gặp một vị trí bù nhất định trong khung nhìn và sau đó nó "cố định" tại chỗ (như vị trí: cố định).
Lưu ý: Trình duyệt Internet Explorer không hỗ trợ định vị sticky. Safari yêu cầu tiền tố -webkit- (xem ví dụ bên dưới). Bạn cũng phải chỉ định ít nhất một trong số top, right, bottom hoặc left để định vị cố định hoạt động.
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}Khi các phần tử được định vị với thuộc tính position ở trên, chúng có thể chồng lên các phần tử khác. Thuộc tính z-index sẽ đóng vai trò chỉ định thứ tự ưu tiên của chúng. (phần tử nào sẽ được đặt ở phía trước hoặc phía sau các phần tử khác). Một phần tử có thể có z-index là giá trị dương hoặc âm
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
width:200px
}
</style>
</head>
<body>
<h1>Đây là logo của Miancode</h1>
<img src="https://minacode.net/public/frontend/images/minacode.png">
<p>Vì thẻ img logo có z-index là -1 nên nó sẽ nằm dưới thẻ h1 và thẻ p</p>
</body>
</html>Ta có:
Lưu ý: z-index chỉ hoạt động trên các phần tử được định vị thôi nhé (position: absolute, relative, fixed hoặc sticky) và các flex-item (về flex-box và flex-item mình sẽ có một bài viết nói về nó chi tiết sau này nhé!)
Nếu hai phần tử được định vị chồng lên nhau mà không được z-index chỉ định thì phần tử được xác định cuối cùng trong Html sẽ được hiển thị trên cùng.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.black-box {
position: relative;
border: 2px solid black;
height: 100px;
margin: 30px;
}
.gray-box {
position: absolute;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}
.green-box {
position: absolute;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height: 100px;
}
</style>
</head>
<body>
<h1>Minacode!Các phần tử có position nhưng không có z-index</h1>
<p>Green box đứng sau cùng nên nó sẽ hiện lên đầu</p>
<div class="container">
<div class="black-box">Black box</div>
<div class="gray-box">Gray box</div>
<div class="green-box">Green box</div>
</div>
</body>
</html>Ta có:
>>còn tiếp>>
.png)
.png)
-min.png)
Banker To Coder
Hi All,
Nguyên đây! MinaCode là website mình tạo ra với mong muốn chia sẻ chút kiến thức liên quan đến lập trình FullStack.
Ngôn ngữ lập trình chủ yếu được sử dụng là Htm, Css, Javascript, Php cùng một số thư viện như Jquery, Fontawesome... Phía Frontend và Farmework Laravel phía Backend.
Mình chưa bao giờ tham gia bất cứ một trường lớp nào về lập trình. Tất cả kiến thức mình chia sẻ đều là trên tình thần tự học. Do đó:
+ MinaCode phù hợp với những tay ngang, xem lập trình như là một kỹ năng bổ trợ trong công việc hay là một kênh kiếm thêm thu nhập từ những very mini projects.
+ MinaCode không phù hợp với những bạn đang được đào tạo bài bản, chính quy.
Mình tin rằng, Trong tương lai không xa. Lập trình sẽ trở nên một kỹ năng không thể thiếu đối với các bạn trẻ.
Cuối cùng thì Ngôn ngữ lập trình không quan trọng bằng Tư duy lập trình. Mình chúc các bạn sẽ có được những kiến thức bổ ích với MinaCode.
--Ngô Sỹ Nguyên--
.png)
