Menu
GIỚI THIỆU
  • Bài này chúng ta học và tìm hiểu Position relative trong css va thuoc tinh absolute trong css - cách sử dụng postion relative với absolute và mối quan hệ giữa chúng với nhau

Bài 10: Tìm hiểu Position relative - absolute trong CSS

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 margin để chuyển phần tử A thì cái thằng bên cạnh nó cũng sẽ di chuyển theo và tất cả các phần tử khác đều sẽ bị ảnh hưởng theo.

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 position. Cái tên nói lên tất cả, position là thuộc tính giúp bạn tùy chỉnh khu vực hiển thị cho phần tử và việc tùy chỉnh này không hề làm ảnh hưởng đến các phần tử khác.

 

Các giá trị của thuộc tính position

Hiện tại position hỗ trợ cho một số giá trị như sau:

  • relative: Dùng để thiết lập một phần tử sử dụng các thuộc tính position (xem ở dưới) mà không làm ảnh hưởng đến việc hiển thị ban đầu.
  • absolute: Dùng để thiết lập vị trí của một phần tử nhưng nó sẽ luôn nằm trong một phần tử mẹ đang là relative.
  • fixed: Hiển thị luôn đi theo trình duyệt khi cuộn trang.
  • static: Đưa phần tử về hiển thị theo kiểu mặc định.

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

  • top: Căn vị trí hiển thị của phần tử theo hướng từ trên xuống dưới. Giá trị càng cao thì phần tử càng thụt xuống dưới.
  • bottom: Căn vị trí hiển thị của phần tử theo hướng từ dưới lên trên. Giá trị càng cao thì phần tử càng hiển thị lên cao.
  • left: Căn vị trí hiển thị từ trái sang phải. Giá trị càng cao thì phần tử sẽ càng thụt về bên phải.
  • right: Căn vị trí hiển thị từ phải sang trái. Giá trị càng cao thì phần tử sẽ càng thụ về bên trái.

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.

#HTML

<img src="https://i.imgur.com/odWztph.jpg" width="250px" height="auto" />
<p>hoicode.com</p>

#CSS

img {
  position: relative;
  top: 85px;
  left: 85px;
  
  /* Không cần quan tâm */
  border: 1px solid #333;
  padding: 2px;
}

Ví dụ về kiểu absolute

Vớ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ẹ.

#HTML

<div id="container">
  <div id="relative">
    <img src="https://i.imgur.com/odWztph.jpg" id="absolute" width="150px" height="auto" />
  </div>
</div>

#CSS

div {
   box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
#container {
  width: 960px;
  margin: 0 auto;
  background-color: #e6e6e6;
  border: 1px solid #333;
  padding: 15px;
}

#relative{
  width: 100%;
  border: 1px solid #333;
  background-color: red;
  height: 300px;
  position: relative;
}
#absolute {
  position: absolute;
  right: 0;
  bottom: 0;
}

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.

<ul id="menu">
  <li>Trang chủ</li>
  <li>Diễn đàn</li>
  <li>Tin tức</li>
  <li>Liên hệ</li>
</ul>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elementum id arcu at luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rutrum nulla in sapien interdum rhoncus. Maecenas sit amet massa nulla. Donec vestibulum dignissim consequat. Vivamus sit amet molestie eros, in malesuada purus.</p>

<p>Etiam quis leo mi. Phasellus dignissim quam turpis, vel venenatis urna tempus pulvinar. Donec in hendrerit lacus. Ut quis lobortis ex, tincidunt ultricies metus. Curabitur vestibulum faucibus pellentesque. Fusce id elit sit amet ex mattis condimentum. Vestibulum nec interdum purus. Phasellus tincidunt mauris purus, sed aliquam turpis euismod non.</p>
body {
  width: 960px;
  margin: 0 auto;
}
#menu {
  padding: 0 32px;
  margin: 0;
  width: 500px;
  position: fixed;
  background: #334793;
  color: #fff;
}
#menu li {
  line-height: 2em;
  margin-right: 15px;
  list-style-type: none;
  display: inline;
}

Tóm lược bài học

Thế 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ờ.

Nguồn: Thachpham
Link: Bài 10: Tìm hiểu Position relative - absolute trong CSS
Tags: Position relative absolute trong CSS Position relative css css cơ bản series css
Category: CSS Cơ bản
Mạnh xã hội: Follow fanpage của team https://www.facebook.com/hoicode/ để tiếp tục theo dõi các loạt bài mới nhất về CSS Cơ bản,Java,C,C++,Javascript,HTML,PHP,Python,Database,Mobile.... mới nhất của chúng tôi.

Chia sẻ liên kết

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Facebook để được hỗ trợ nhanh nhất.

    Email của bạn sẽ được sử dụng với mục đích thông báo tin tuyển dụng mới hoặc các bài viết mới.

    captcha