CÁC THUỘC TÍNH POSITION TRONG CSS

  -  

Ngày lúc này chúng ta vẫn đi vào tò mò cách sử dụng position trong CSS để chỉnh sửa các thành phần trong website được dễ dàng và tiện lợi hơn nhé!


Thông thường xuyên thì phần tử của website sẽ được hiển thị từ bên trên xuống dưới. Tuy vậy sẽ có một trong những trường hợp bạn có nhu cầu thay đổi giải pháp hiển thị của thành phần này để có thể cân xứng với yêu thương cầu của bạn hay designer...

Bạn đang xem: Các thuộc tính position trong css

Do kia thuộc tính position được ra đời để giải quyết vấn đề trên. Nó cung cấp cho chính mình các cách tiến hành để kiểm soát và đ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 tiện lợi và cấp tốc chóng.

Position đước phân thành thành 5 giá bán trị chủ yếu là:static: quý giá mặc định, các bộ phận sẽ được hiển thị theo máy tự trong website.relative: phần tử được xác định bằng cách căn chỉnh quý hiếm top, right, bottom, left dựa vào vị trí bây giờ của nó trong website.absolute: bộ phận xác xác định trí dựa vào thành phần phụ vương gần với nó nhất.fixed: thành phần xác định vị trí dựa trên viewport.sticky: thành phần xác định ví trí dựa vào vị trí scroll(cuộn).

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

*

Như bản thân đã nói ở trên thì nằm trong tính này đã hiển thị các thành phần theo trang bị tự sống trong website. Cùng để dễ hình dung hơn thì bạn xem ví dụ sau đây nha!

HTML


CSSbody 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à hiệu quả bạn xem hình ảnh bên dưới nhé!

*

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

See the Pen vị trí static CSS by haycuoilennao19 (

Cũng với lấy một ví dụ trên, bọn họ sẽ đi vào tùy chỉnh thuộc tính position:relative để thấy sự biệt lập của nó nhé!

HTML


CSSbody font-size:2rem; font-family:"Roboto",sans-serif; .phan-tu-cha background:orange; height:400px; width:400px; .phan-tu-con /*Điềuchỉnhvịtrírelative*/ position:relative; top:10px; left:50px; background:lightskyblue; height:200px; width:200px; Và tác dụng bạn xem hình ảnh bên dưới nhé!

*

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

See the Pen địa điểm relative vào CSS by haycuoilennao19 (

Bây tiếng với ví dụ trên bọn họ sẽ đi vào tùy chỉnh cấu hình thuộc tính position:absolute cho bộ phận để xem sự khác biệt của nó nhé!

HTML


CSSbody font-size:2rem; font-family:"Roboto",sans-serif; .phan-tu-cha background:orange; height:400px; width:400px; .phan-tu-con /*Điềuchỉnhvịtríabsolute*/ position:absolute; top:0px; left:0px; background:lightskyblue; height:200px; width:200px; Và kết quả bạn xem hình hình ảnh dưới trên đây nhé:

*

Còn sau đây là hiệu quả trên Codepen nha!

See the Pen địa điểm absolute trong CSS by haycuoilennao19 (
haycuoilennao19) on CodePen.

Xem thêm: Công Ty Tnhh Giải Pháp Kinh Doanh Multi Intelligence, Tuyển Kế Toán

Như bạn thấy thì bây giờ thằng thân phụ của nó là document body chứ không phải là thẻ
CSSbody font-size:2rem; font-family:"Roboto",sans-serif; .phan-tu-cha /*Điềuchỉnhvịtrírelativechothằngcha*/ position:relative; background:orange; height:400px; width:400px; .phan-tu-con /*Điềuchỉnhvịtríabsolutechothằngcon*/ position:absolute; top:0; left:0; background:lightskyblue; height:200px; width:200px; Và công dụng bạn xem hình hình ảnh đưới trên đây nhé!

*

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

See the Pen phối hợp position relative với absolute by haycuoilennao19 (

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

HTML


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

CSS

body,html height:100%; p margin:0auto; 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à công dụng bạn coi Codepen bên dưới nhé:

See the Pen sử dụng vị trí position fixed by haycuoilennao19 (

Đây là cách tiến hành xác xác định trí của thành phần dựa trên vị trí scroll(cuộn) của tín đồ dùng. Nó là sự phối hợp của hai cách làm relative cùng fixed. Để nắm rõ hơn bạn xem ví dụ sau đây nhé!

HTML

BạnhãyScrollThanhCuộnXuốngĐểThấyKếtQuảNhé!


Sometexttoenablescrolling...

Sometexttoenablescrolling...

Sometexttoenablescrolling...

Sometexttoenablescrolling...

Sometexttoenablescrolling...

Xem thêm: Dịch Bài Báo Tiếng Anh Sang Tiếng Việt, 14 Cách Dịch Văn Bản Tiếng Anh Sang Tiếng Việt

Sometexttoenablescrolling...


CSS

div.sticky position:-webkit-sticky; position:sticky; top:0; padding:5px; font-size:25px; color:#fff; background-color:#bada55; border:2pxsolid#bada55; box-shadow:01px1pxrgba(0,0,0,0.12), 02px2pxrgba(0,0,0,0.12), 04px4pxrgba(0,0,0,0.12), 08px8pxrgba(0,0,0,0.12), 016px16pxrgba(0,0,0,0.12); Và kết quả bạn xem Codepen bên dưới nhé:

See the Pen địa điểm sticky trong css by haycuoilennao19 (

Tổng kết:

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


*

*

Góc trả lời

Nếu các bạn có gì thắc mắc thì liên hệ mình qua số đông mạng buôn bản hội tiếp sau đây nhé!