Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Hướng Dẫn Về Thuộc Tính Position Trong CSS

Hướng Dẫn Về Thuộc Tính Position Trong CSS


Ngày 24 Tháng 12 Năm 2020

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách sử dụng position trong CSS để căn chỉnh các phần tử trong website được dễ dàng và tiện lợi hơn nhé!


Position CSS là Gì?

Thông thường thì phần tử của trang web sẽ được hiển thị từ trên xuống dưới. Tuy nhiên sẽ có một số trường hợp bạn muốn thay đổi cách hiển thị của phần tử này để có thể phù hợp với yêu cầu của khách hàng hay designer...
Do đó thuộc tính position được ra đời để giải quyết vấn đề trên. Nó cung cấp cho bạn các phương thức để điều chỉnh vị trí của phần tử theo ý muốn của mình ở trong trang web một cách dễ dàng và nhanh chóng.

Position đước chia thành thành 5 giá trị chính là:

  • static: Giá trị mặc định, các phần tử sẽ được hiển thị theo thứ tự trong website.
  • relative: Phần tử được xác định bằng cách căn chỉnh giá trị top, right, bottom, left dựa trên vị trí hiện tại của nó trong website.
  • absolute: Phần tử xác định vị trí dựa trên thành phần cha gần với nó nhất.
  • fixed: Phần tử xác định vị trí dựa trên viewport.
  • sticky: Phần tử xác định ví trí dựa trên vị trí scroll(cuộn).

Để giúp bạn dễ hình dung hơn thì mình có một hình minh họa về cách sử dụng 3 giá trị position cơ bản (static, relative, absolute) cho phần tử trong website ở bên dưới nhé!

Ví dụ position trong CSS

Thuộc tính Static

Như mình đã nói ở trên thì thuộc tính này sẽ hiển thị các phần tử theo thứ tự ở trong website. Và để dễ hình dung hơn thì bạn xem ví dụ dưới đây nha!

HTML

 <div class="phan-tu-cha">
  Phần Tử Cha
    <div class="phan-tu-con">Phần Tử Con</div>
</div>

CSS

body{
  font-size: 2rem;
  font-family: 'Roboto', sans-serif;
}
.phan-tu-cha {
     background: orange;
  height: 400px;
  width: 400px;
}
.phan-tu-con {
  background: lightskyblue;
  height: 200px;
  width: 200px;
  position: static;
}

Và kết quả bạn xem hình ảnh bên dưới nhé!

Ví dụ position static trong CSS

Còn dưới đây là dự án trên Codepen nhé!

See the Pen vị trí static CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Thuộc tính Relative

Cũng với ví dụ trên, chúng ta sẽ đi vào thiết lập thuộc tính position:relative để xem sự khác biệt của nó nhé!

HTML

 <div class="phan-tu-cha">
  Phần Tử Cha
    <div class="phan-tu-con">Phần Tử Con</div>
</div>

CSS

body{
  font-size: 2rem;
  font-family: 'Roboto', sans-serif;
}
.phan-tu-cha {
  background: orange;
  height: 400px;
  width: 400px;
}
.phan-tu-con {
  /*Điều chỉnh vị trí relative*/
  position: relative;
  top: 10px;
  left: 50px;
  background: lightskyblue;
  height: 200px;
  width: 200px;
}

Và kết quả bạn xem hình ảnh bên dưới nhé!

Ví dụ position relative trong CSS

Còn dưới đây là dự án trên Codepen nha!

See the Pen vị trí relative trong CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Thuộc tính Absolute

Bây giờ với ví dụ trên chúng ta sẽ đi vào thiết lập thuộc tính position:absolute cho phần tử để xem sự khác biệt của nó nhé!

HTML

 <div class="phan-tu-cha">
  Phần Tử Cha
    <div class="phan-tu-con">Phần Tử Con</div>
</div>

CSS

body{
  font-size: 2rem;
  font-family: 'Roboto', sans-serif;
}
.phan-tu-cha {
             background: orange;
  height: 400px;
  width: 400px;
}
.phan-tu-con {
  /*Điều chỉnh vị trí absolute*/
  position: absolute;
  top: 0px;
  left: 0px;
  background: lightskyblue;
  height: 200px;
  width: 200px;
}

Và kết quả bạn xem hình ảnh dưới đây nhé:

Ví dụ position absolute trong CSS

Còn dưới đây là kết quả trên Codepen nha!

See the Pen vị trí absolute trong CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Như bạn thấy thì hiện tại thằng cha của nó là document body chứ không phải là thẻ <div class="phan-tu-cha">.

Vây để có thể thiết lập vị trí phần tử con dựa theo thẻ <div class="phan-tu-cha"> thì chúng ta có thể thiết lập position:relative cho thằng cha như ở ví dụ sau đây nhé!

HTML

 <div class="phan-tu-cha">
  Phần Tử Cha
    <div class="phan-tu-con">Phần Tử Con</div>
</div>

CSS

body{
  font-size: 2rem;
  font-family: 'Roboto', sans-serif;
}
.phan-tu-cha {
  /*Điều chỉnh vị trí relative cho thằng cha*/
  position: relative;
  background: orange;
  height: 400px;
  width: 400px;
        }
.phan-tu-con {
  /*Điều chỉnh vị trí absolute cho thằng con*/
  position: absolute;
  top: 0;
  left: 0;
  background: lightskyblue;
  height: 200px;
  width: 200px;
}

Và kết quả bạn xem hình ảnh đưới đây nhé!

Ví dụ kết hợp position absolute và relative trong CSS

Và dưới đây là dự án trên codepen nha!

See the Pen kết hợp position relative và absolute by haycuoilennao19 (@haycuoilennao19) on CodePen.

Thuộc tính Fixed

Thuộc tính này giúp bạn có thể xác định ví trí của phần tử luôn luôn nằm ở một nơi cố định trong trang web và sẽ không bị ảnh hưởng, thay đổi khi người dùng scroll xuống. Và để dễ hình dung thì bạn xem ví dụ dưới đây nhé:

HTML

 <div class="phan-tu">Vị Trí Phần Tử</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

CSS

body, html {
  height: 100%;
}
p {
  margin: 0 auto;
  max-width: 600px;
  margin-top: 40px;
  line-height: 1.5;
}
body {
  font-family: Roboto, serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.phan-tu {
  background-color: lightskyblue;
  opacity: .85;
  padding: 20px;
  color: rgba(255,255,255,.9);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

Và kết quả bạn xem Codepen bên dưới nhé:

See the Pen sử dụng vị trí position fixed by haycuoilennao19 (@haycuoilennao19) on CodePen.

Thuộc tính Sticky

Đây là phương thức xác định vị trí của phần tử dựa trên vị trí scroll(cuộn) của người dùng. Nó là sự kết hợp của hai phương thức relativefixed. Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé!

HTML

<h2>Bạn hãy Scroll Thanh Cuộn Xuống Để Thấy Kết Quả Nhé! </h2>
<div class="sticky">Phần Tử Vị Trí  Sticky!</div>
<div style="padding-bottom:2000px">
  <p>Some text to enable scrolling...</p>
  <p>Some text to enable scrolling...</p>
  <p>Some text to enable scrolling...</p>
  <p>Some text to enable scrolling...</p>
  <p>Some text to enable scrolling...</p>
  <p>Some text to enable scrolling...</p>
</div>

CSS

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  font-size: 25px;
  color: #fff;
  background-color: #bada55;
  border: 2px solid #bada55;
  box-shadow: 0 1px 1px rgba(0,0,0,0.12),
              0 2px 2px rgba(0,0,0,0.12),
                0 4px 4px rgba(0,0,0,0.12),
              0 8px 8px rgba(0,0,0,0.12),
              0 16px 16px rgba(0,0,0,0.12);
}

Và kết quả bạn xem Codepen bên dưới nhé:

See the Pen vị trí sticky trong css by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn tham khảo:

Position CSS Tricks

Position W3Schools

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức position css hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!