CSS Position


CSS Position

CSS Position có 5 loại:

  1. static
  2. fixed
  3. relative
  4. absolute
  5. sticky

Mặc định các thẻ trong html có position là static. Ta xem ví dụ sau để hiểu về css poisition nhé.

<style>

  .boss {
   background-color: lightgreen;
   height: 1000px;
 }
 .parent {
   background-color:yellow;
   bottom-padding: 1000px;
   position: relative;
   top:10px;
   left: 20px;
 }

 .child {
   background-color: lightblue;
   width: 200px;
   position: absolute;
   right:0px;
   top: 0px;
   
 }


 .child3 {
   background-color: orange;
   position: fixed;
   top: 100px;
   right: 0px;
 }

 .parent2 {
   background-color: lightblue;
   position: sticky;
   top: 100px;
 } 
</style>

<div class="boss">

 <div class="parent">
   <h1> Welcome to CSS</h1>
   <p class="child">Hello world</p>
   <p>Javascript</p>
   <p class="child3">CSS is Awesome</p>
 </div>

 <div class="parent2">Sticky</div>
 <p>CSS is easy. Javascript is easy too</p>
 <p>CSS is easy. Javascript is easy too</p>
 <p>CSS is easy. Javascript is easy too</p>
 <p>CSS is easy. Javascript is easy too</p>
</div>

Welcome to CSS

Hello world

Javascript

CSS is Awesome

Sticky

CSS is easy. Javascript is easy too

CSS is easy. Javascript is easy too

CSS is easy. Javascript is easy too

CSS is easy. Javascript is easy too

CSS Position: fixed

.child3 {
   background-color: orange;
   position: fixed;
   top: 100px;
   right: 0px;
 }

<p class="child3">CSS is Awesome</p>

Ta thấy thẻ p sẽ được fix tại vị trí top là 100px và right là 0px của trình duyệt , dù ta có scroll xuống thì luôn luôn fix tại vị trí đó.

CSS Position: relative

Mặc định position là static, nên không dùng được top,right,left,bottom. Nếu ta dùng relative thì dùng được các thuộc tính như top, right, left, bottom.


 .boss {
   background-color: lightgreen;
   height: 1000px;
 }
 .parent {
   background-color:yellow;
   bottom-padding: 1000px;
   position: relative;
   top:10px;
   left: 20px;
 }


<div class="boss">

<div class="parent">
  <h1> Welcome to CSS</h1>
  <p class="child">Hello world</p>
  <p class="child2">Javascript</p>
  <p class="child3">CSS is Awesome</p>
</div>

</div>


div có class là parent có position là relative thì sẽ dùng được top, right, left, bottom, ở đây ta xét là top: 10px, left: 20px, như vậy div parent lấy div boss làm chuẩn. Ta xem hình trên div màu vàng dịch xuống dưới 10px và dịch sang phải là 20px.

CSS Position: absolute

.parent {
   background-color:yellow;
   bottom-padding: 1000px;
   position: relative;
  
 }


.child {
   background-color: lightblue;
   width: 200px;
   position: absolute;
   right:0px;
   top: 0px;
   
 }


<div class="parent">
  <h1> Welcome to CSS</h1>
  <p class="child">Hello world</p>
 </div>


Position absolute cũng giống relative, cũng dùng được top,right, bottom, left. Nhưng absolute sẽ dựa vào relative của cha gần nhất để xét vị trị. Ta thấy class parent có position là relative, còn class child có position là absolute. Lúc này sẽ xét là right 0px top 0px, vị trí này tính từ div parent. Ta xem hình ví dụ trên, div hello world nằm góc bên phải div màu vàng. Nếu ta xóa position relative in class parent thì . div hello world sẽ dùng document body.

CSS Position: sticky

Sticky giống như là relative + fixed. Khi ta scroll đến đểm cần fixed thì div sẽ đứng yên một chổ luôn.

.boss {
   background-color: lightgreen;
   height: 1000px;
 }

.parent2 {
   background-color: lightblue;
   position: sticky;
   top: 100px;
 } 


<div class="boss">
 <div class="parent2">Sticky</div>
 <p>CSS is easy. Javascript is easy too</p>
 <p>CSS is easy. Javascript is easy too</p>
 <p>CSS is easy. Javascript is easy too</p>
 <p>CSS is easy. Javascript is easy too</p>
</div>


Ta thấy ví dụ trên div sticky sẽ fix lại tại vị trí có top là 100px của trình duyệt. Như vậy ta đã tìm hiểu xong về CSS position rồi nhé. ^_^