Relative và absolute trong CSS
Tìm hiểu relative trong CSS và thuộc tính absolute trong CSS, cách sử dụng Position relative và absolute để các bạn có thể vận dụng làm những ví dụ cụ thể.
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
Nội dung bài học
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 9:
Thuộc tính margin – padding và Box Model trong CSSHọc lập trình web
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;
}
4 để xem sự khác biệt của nó nhé!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;
}
6 cho phần tử để xem sự khác biệt của nó nhé!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;
}
7.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;
}
7 thì chúng ta có thể thiết lập 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;
}
4 cho thằng cha như ở ví dụ sau đây nhé!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
2 và
Phần Tử Cha
Phần Tử Con
3. Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé!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;
}
0CSS
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;
}
1Và 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ẻ!