Thuộc tính CSS absolute position

Thuộc tính CSS absolute position

Gia đình miền Tây huyện Thới Bình hơn 20 năm chăm sóc hàng nghìn chim trời

Tập tành Working With Domain Access Module in Drupal 7.x

Thuộc tính CSS absolute position

Có bạn email hỏi mình về Absolute position, thể theo yêu cầu đó, hôm nay mình sẽ giới thiệu với các bạn về Absolute posiotion trong CSS.

Absolute position là gì?

Nói dễ hiểu nhất, Absolute position là cách định vị trí của một thành phần bên trong không gian thành phần chứa chúng (thành phần mẹ), mà không phụ thuộc vào margin  hay float. Và khi sử dụng absolute position, bạn có thể xếp các thành phần chồng lên nhau (Ví dụ: bạn có thể chồng một đoạn văn bản lên trên một ảnh).

Điểm lưu ý: Để sử dụng được absolute position, thành phần mẹ phải được gán position là relative, nếu thành phần mẹ không được gán relative, thì mặc định  thành phần <body> sẽ được coi là thành phần relative.

Cách căn chỉnh vị trí của một thành phần như thế nào?

Absolute position dựa vào 4 vị trí: top, right, bottom, left cùng với các đơn vị đo như: px, cm, em, %… để canh chỉnh vị so với thành phần chứa nó. Trong thực thế bạn chỉ dựa vào một trong các cặp ví trí sau: top-left, top-right, bottom-left và bottom-right là có thể canh chỉnh vị trị của một thành phần:

Lý thuyết xong » Thực hành thôi…

Bây giờ chúng ta sẽ cùng ứng dụng để hiểu rõ hơn về Absolute position, ví dụ bên dưới chúng ta sẽ căn chỉnh vị trí của các thành phần div: box1, box2, box3 và box4 tại các ví trí khác nhau trong thành phần div mẹ (id=”wrapper”):

Mã HTML:

<div id="wrapper">
          <div class="box1"></div>
          <div class="box2"></div>
          <div class="box3"></div>
          <div class="box4"></div>
</div>

Trước tiên: gán thuộc tính position: relative cho thành phần wrapper, tạo border và gán kích thước để dễ phân biệt

#wrapper{position: relative;width: 500px; height: 400px; border: 1px solid #cfcfcf}

Căn chỉnh các thành phần với Absolute position:

.box1, .box2, .box3, .box4{background: #777; width: 150px; height: 100px; color: white; padding: 10px}
.box1{position: absolute; top: 0; left: 0}
.box2{position: absolute; top: 0; right: 0}
.box3{position: absolute; bottom: 0px; left: 10px}
.box4{position: absolute; bottom: 70px; right: 10px}

Và đây là kết quả:

Thuộc tính CSS absolute position

Bạn hãy thử thay đổi các giá trị khác để kiểm tra sự thay đổi.

Kết Luận:

Để sử dụng được absolute position, điểm mấu chốt quan trọng nhất đó là phải xác định được thành phần mẹ và đặt thuộc tính position: relative.

Ngoài relative, absolute, position còn có các giá trị sau:

  • static: (Giá trị mặc định khi không được khai báo), các thành phần sẽ được hiện thị theo vị trí mặc định trong cấu trúc của HTML
  • fixed: Cố định thành phần tại một vị trí và không thay đổi khi cuộn trang
  • inhertit: Kết thừa từ giá trị position của thành phần cha
Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Khanh Hoang

Khanh Hoang - Kenn

Kenn is a user experience designer and front end developer who enjoys creating beautiful and usable web and mobile experiences.

More about Khanh Hoang

Bài cùng chuyên mục

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
XBOX 360 Review: Leading All The Video Games Console!

XBOX 360 Review: Leading All The Video Games Console!

After the huge success of Xbox, Microsoft has launched a second video game console naming it the Xbox 360.

Trải nghiệm Máy tính Rosa Intel NUC: hoàn hảo cho gia đình

Trải nghiệm Máy tính Rosa Intel NUC: hoàn hảo cho gia đình

ROSA Intel NUC là dòng sản phẩm PC nhỏ gọn hướng đến đối tượng người dùng có nhu cầu văn phòng

CNTT Việt Nam 2011 - Nông dân được ‘lên mây’

CNTT Việt Nam 2011 - Nông dân được ‘lên mây’

Năm 2011 đã trôi qua khá trầm lắng trên thị trường CNTT Việt Nam. Bối cảnh kinh tế khó khăn đã để lại dấu ấn sâu sắc trong bức tranh toàn cảnh.

Công ty diệt chuột T&C

 

Diet con trung

Donate

Paypal donate