Relative và absolute trong CSS

Trong bài học này mình chỉ trình bày hai thuộc tính đó là relative và absolute. Chúng ta cùng bắt đầu tìm hiểu nhé!

Video học CSS: Thuộc tính Position:relative và absolute

1. Position relative và absolute trong CSS

2. Lời kết

Như vậy thuộc tính position được sử dụng thông dụng nhất khi xây dựng menu đa cấp bằng CSS, tiếp đó là các hiệu ứng tooltip kết hợp với Hover. 

Nếu bạn muốn thực hành thêm nhiều ví dụ hơn thì ở bài học sau mình có giới thiệu rồi. Còn bài học hôm nay kết thúc tại đây. Chúc các bạn học tập hiệu quả.

Bài 10: Học CSS với thuộc tính Position:relative và absolute

Bài viết nằm trong case Study Hướng dẫn CSS cơ bản và nâng cao 

—oOo— 

Bài 11:
Xây dựng menu dọc hai cấp đơn giản bằng CSS

Tag: Tim hieu relative trong CSS va thuoc tinh absolute trong CSS, cach su dung Position relative va absolute de cac ban co the van dung lam nhung vi du cu the. Huong dan hoc CSS , Hoc CSS truc tuyen , Tu hoc CSS , Video huong dan hoc CSS , download tai lieu hoc CSS , hoc CSS mien phi , hoc CSS online , hoc CSS truc tuyen , hoc CSS co ban , hoc CSS nang cao , tai lieu hoc CSS , Ebook hoc CSS , hoc CSS can ban , sach hoc CSS , học lập trình CSS.

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é!

Thuộc tính 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; }2

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

 
   Phần Tử Cha
     Phần Tử Con
 

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é!

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 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; }3

Cũng với ví dụ trên, chúng ta sẽ đi vào thiết lập thuộc tính

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;
 }

HTML

 
   Phần Tử Cha
     Phần Tử Con
 

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é!

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 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; }5

Bây giờ với ví dụ trên chúng ta sẽ đi vào thiết lập thuộc tính

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;
 }

HTML

 
   Phần Tử Cha
     Phần Tử Con
 

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

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ẻ

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ây để có thể thiết lập vị trí phần tử con dựa theo thẻ

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;
 }

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;
 }

HTML

 
   Phần Tử Cha
     Phần Tử Con
 

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ướ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   Phần Tử Cha     Phần Tử Con 0

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

 
Vị Trí Phần Tử

 
Lorem ipsum dolor sit amet, consectetur adipisicing elit...

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   Phần Tử Cha     Phần Tử Con 1

Đâ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

 
   Phần Tử Cha
     Phần Tử Con
 

 
   Phần Tử Cha
     Phần Tử Con
 

HTML

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;
 }

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 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ẻ!