VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

CSS Tuts

CSS là gì? Cú pháp CSS Bộ chọn CSS Liên kết css với html Đơn vị đo trong CSS Mã màu trong CSS Comment trong CSS

CSS Các thuộc tính

CSS Background CSS Border Font trong CSS Định dạng văn bản (Text) trong CSS Image trong CSS Link trong CSS Bảng trong CSS Căn lề trong CSS List trong CSS Thuộc tính padding trong CSS Con trỏ trong CSS Thuộc tính outline trong CSS Kích cỡ trong CSS Scrollbar trong CSS Thuộc tính visibility trong CSS Căn chỉnh vị trí trong CSS Thuộc tính z-index trong CSS Pseudo Class trong CSS Pseudo Element trong CSS Các quy tắc trong CSS Kiểu Media trong CSS Layout trong CSS Validation trong CSS

CSS nâng cao

Giới thiệu CSS3 Bo tròn góc trong CSS Border Image trong CSS
1 / 3
❮ ❯

Căn chỉnh vị trí trong CSS


Thuộc tính visibility trong CSS
Thuộc tính z-index trong CSS

Căn chỉnh vị trí trong CSS giúp bạn thiết lập vị trí các phần tử trong tài liệu HTML. Bạn có thể đặt bất cứ phần từ HTML nào tại bất cứ đâu bạn muốn. Hoặc bạn có thể xác định vị trí tương đối của phần tử này trong mối quan hệ (lệ thuộc) vào vị trí tự nhiên trong trang hoặc vị trí tuyệt đối dựa trên phần tử cha.

Tiếp theo chúng ta cùng tìm hiểu các thuộc tính trong CSS mà được sử dụng để chỉnh vị trí của phần tử.


Nội dung chính

  • Thuộc tính position trong CSS
  • Vị trí tương đối trong CSS
  • Vị trí tuyệt đối trong CSS
  • Ví trí cố định trong CSS

Thuộc tính position trong CSS

Thuộc tính position xác định kiểu phương thức xác định vị trí được sử dụng cho một phần tử. Có 4 giá trị để chỉnh vị trí khác nhau mà thuộc tính này có thể nhận, đó là:

  • static

  • relative

  • fixed

  • absolute

Các phần tử sẽ được chỉnh vị trí bởi sử dụng các thuộc tính top, bottom, left và right. Tuy nhiên, các thuộc tính này sẽ không làm việc trừ khi bạn thiết lập thuộc tính position đầu tiên. Tùy vào giá trị truyền cho, các thuộc tính này sẽ đem lại tác động khác nhau.



Vị trí tương đối trong CSS

Một phần tử nếu được xác định với position: relative; tức là được chỉnh vị trí tương đối liên quan tới vị trí thông thường của nó.

Tùy theo cách bạn thiết lập các thuộc tính (như left, right, bottom và top) tới vị trí tương đối của phần tử thì vị trí của phần tử sẽ được căn chỉnh theo vị trí thông thường của nó. Chẳng hạn, left:20 sẽ cộng vào vị trí bên trái của phần tử.

Ví dụ sau minh họa cách sử dụng thuộc tính này trong CSS:


<html>
<head>
<meta charset="UTF-8">
</head>
<body>
  <div style="position:relative;left:80px;top:2px;
  background-color:yellow;">
  Ví dụ giá trị relative của thuộc tính position.
  </div>
</body>
</html>

Kết quả:


Vị trí tuyệt đối trong CSS

Một phần tử nếu được xác định với position: absolute; tức là được xác định vị trí tuyệt đối. Phần tử sẽ được định vị trí theo cửa sổ trình duyệt.

Ví dụ minh họa cho vị trí tuyệt đối trong CSS:


<html>
<head>
<meta charset="UTF-8">
</head>
<body>
  <div style="position:absolute; left:80px; top:20px; 
  background-color:yellow;">
  Ví dụ giá trị absolute của thuộc tính position.
  </div>
</body>
</html> 


Ví trí cố định trong CSS

Thuộc tính postion: fixed; xác định vị trí cố định cho một phần tử. Vị trí cố định này được thiết lập theo cửa sổ trình duyệt.

Ví dụ sau minh họa cách thiết lập vị trí cố định trong CSS.


<html>
<head>
<meta charset="UTF-8">
</head>
<body>
  <div style="position:fixed; left:80px; top:20px; 
  background-color:yellow;">
  Ví dụ giá trị fixed của thuộc tính position.
  </div>
</body>
</html>

Thuộc tính visibility trong CSS
Thuộc tính z-index trong CSS

Recent Updates

Sắp Tết 2024 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2024?Border Image trong CSSBo tròn góc trong CSSGiới thiệu CSS3Layout trong CSSCác quy tắc trong CSSPseudo Element trong CSSPseudo Class trong CSSThuộc tính z-index trong CSSCăn chỉnh vị trí trong CSSThuộc tính visibility trong CSSScrollbar trong CSSKích cỡ trong CSS

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml