Show Trong CSS, khi bạn di chuyển bất cứ một phần tử nào bằng các thuộc tính về Box Model như margin hoặc float thì các phần từ bên cạnh nó đều sẽ bị ảnh hưởng. Ví dụ bạn sử dụng Vậy nếu như bạn muốn di chuyển một phần tử nào đó mà không ảnh hưởng đến bố cục của website thì sẽ có một giải pháp đó là sử dụng thuộc tính Các giá trị của thuộc tính positionHiện tại position hỗ trợ cho một số giá trị như sau:
Sau khi thiết lập một phần tử sử dụng position, chúng ta sẽ sử dụng thêm một số thuộc tính position để căn chỉnh vị trí của nó và giá trị là số kèm theo đơn vị, có 4 thuộc tính position là:
Ví dụ về kiểu relativeỞ ví dụ này, mình sẽ cho cái hình ảnh hiển thị theo kiểu relative và dùng thuộc tính position để nó hiển thị đè lên văn bản. [codepen id=”KwjJxm”] Ví dụ về kiểu absoluteVới absolute, mình phải có một phần tử mẹ là kiểu relative. Lúc này giá trị thấp nhất của nó sẽ tính từ lề của phần tử mẹ. Ví dụ như ở dưới, vùng màu đỏ là vùng được thiết lập kiểu relative, còn hình ảnh sẽ là kiểu absolute. Khi mình đưa các thuộc tính position về giá trị là 0 thì nó vẫn nằm trong phần tử mẹ. [codepen id=”LEKqJM”] Ví dụ về kiểu fixedỞ ví dụ này, mình sẽ tạo ra một cái danh sách, sau đó đưa các mục con bên trong thành kiểu inline và position kiểu fixed để nó luôn đi theo trình duyệt khi kéo thanh cuộn. [codepen id=”LEKqXq”] Lời kếtThế tại sao mình lại giải thích cặn kẽ về position như vậy, nó quan trọng lắm sao? Khá là quan trọng sau này, mà cụ thể là trước mắt ở phần sau mình sẽ bày cho bạn một vài kỹ thuật làm menu đổ xuống có phân cấp và trong đó sẽ sử dụng thuộc tính position rất nhiều và nó hiển thị tốt hay không là quan trọng bạn có thiết lập đúng kiểu position hay không. Và tương lai bạn còn dùng nhiều nữa nên hãy nắm rõ ngay từ bây giờ. Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng. Sử dụng position trong CSS hướng dẫn bạn các cách sử dụng thuộc tính position để thiết lập vị trí cho các tag html trong trang web. Trong css, nhiều chế độ giúp bạn bố trí các tag html. Có thể điều chỉnh chế độ này cho một số tag thông qua thuộc tính positon. Các giá trị của thuộc tính postionThuộc tính Position trong CSS có các giá trị sau đây: static, absolute, relative, fixed. static: đây là giá trị mặc định của các tag html trong trang. position là static nghĩa là các tag được dàn ra trong trang để user thấy được mọi tag. Tag phía trên càng lớn thì nó càng đẩy tag ở sau xuống dưới. Ví dụ 1: <style>
div { font-size: 32px; }
#a {
height: 220px; width: 500px; background:darkseagreen;
}
#b {
height: 300px; width: 200px; background:greenyellow;
}
</style>
<div id="b"> DIV B </div>
<div id="a"> DIV A </div>absolute: tag nào có postion là absolute thì tag đó được đặt tại tọa độ chỉ định. Tính từ góc trên trái tài liệu. Vị trí của tag lúc này phụ tùy vào giá trị trong các thuộc tính top, left , right, bottom. Khi bạn cuộn nội dung trang web, các tag có position là absolute cũng được cuộn theo fixed: tag nào có postion là fixed sẽ được đặt tại tọa độ chỉ định. Tính từ góc trên trái tài liệu. Vị trí của tag lúc này phụ tùy vào giá trị trong các thuộc tính top, left , right, bottom. Khi bạn cuộn nội dung trang web, các tag có position là fixed sẽ đứng yên không cuộn theo. relative: tag nào có postion là relative thì sẽ được di chuyển đến tọa độ chỉ định. Tính từ chỗ mà tag đó đang nằm. Vị trí của tag phụ tùy vào giá trị trong top, left (có thể dùng số âm). Các thuộc tính tọa độ trong css dùng với positonKhi bạn dùng position là absolute / fixed / relative thì bạn có thể dùng các thuộc tính css sau để chỉ dịnh vị trí cho các tag:
Thuộc tính z-index trong cssThuộc tính z-index dùng để sắp xếp các tag cho nằm trên dưới các tag khác. Giá trị của thuộc tính này là số nguyên. Và tag nào có giá trị z-index cao hơn sẽ nằm phía trẽn. Ví dụ 2: <style>
div { font-size: 32px; }
#a {
height: 220px; width: 500px; background:darkseagreen;
position: absolute;top: 40px; left: 80px; z-index: 1;
}
#b {
height: 300px; width: 200px; background:greenyellow;
position: absolute; top: 90px; left: 180px; z-index: 2;
}
</style>
<div id="b"> DIV B </div>
<div id="a"> DIV A </div>Chỉ định vị trí của tag con trong tag chaVới một tag cha có thuộc tính position là relative cộng với tag con có thuộc tính position là absolute. Thì tag con sẽ được định vị trí ở bên trong tag cha của nó mà thôi. Ví dụ 3: <style>
.header {
height: 220px;
background: darkolivegreen;
position: relative;
}
div.logo {
color:yellow; font-size: 36px;
position: absolute; top: 40px; left: 80px;
}
</style>
<div class="header">
<div class="logo"> WEBSITE TIN TỨC</div>
</div>Sử dụng position trong CSS không khó, và rất cần thiết. Rất thường có nhu cầu đặt tag html ở vị trí mong muốn. Kiến thức cần đọc trước bài này là Cơ bản về Cascading Style Sheet, bạn nên đọc nhiều lần nhé. |
