web ඉගෙන ගනිමු - 8 පාඩම

කොහොමද යාලුවන්ට, අද අපි කථා කරන්නෙ CSS වල තවත් ප්‍රධාන කොටසක්.
අපි type කරන code ඒක page ඒක scroll කලා කියලා නැති වෙන්නෙ නැතුව ඒ position ඒක නොවෙනස්ව තියෙනවනම් අපට ඒක සෑහෙන්න වැදගත් වේවි.
ඒක කරන්න අපි පාවිච්චි කරන්නෙ position කියන property ඒක.
position ඒකෙ ප්‍රධාන අනු කොටස් කිහිපයක් තියෙනවා.

1. Position:fixed
මේකේදි position ඒක fix වෙනවා. තවත් පැහැදිලි කරනවනම් page ඒක scroll කලා කියලා  මේ දේවල් චලනය වෙන්නෙ නෑ. ඒක ඒතනට fix වෙලයි තියෙන්නනෙ....

ex:

p.fixed_posion
{
     position: fixed;
     top:20px;
     left:20px;
}

2.Position:relative
මේකෙදි position ඒක අදාල property ඒකේ original position ඒකත් ඒක්ක වෙනස් වෙනවා. ඒකයි මේකෙ position ඒක relative කියන්නෙ.

ex:

p.relative_position
{
      position:relative;
      left:20px;
}

3.Position:absolute
මේකෙදි පාවිච්චි වෙන absolute position ඒකේදි position ඒක ගැන හිතන්නෙ නැතුව properties පාවිච්චි කරන්න පුලුවන්.මේක හුගක් වෙලාවට පාවිච්චි කරනවා headers දාන කොට.

ex:

h1{
       position:absolute;
       left:100px;
}

අපි type කරන code ඒකකට shadow ඒකක් වුනත් දාන්න පුලුවන් CSS පාවිච්චි කරලා....

ex:

h1{
        color: white;
        text-shadow: 2px 2px 2px #000000;
}

ඒ වගේම div tag ඒක පාවිච්චි කරලා වෙන් කරන කොටසකට වුනත් shadow ඒකක් දාන්න පුලුවන්.

ex:

div{
          background-color: yellow;
          box-shadow: 10px 10px;
}

මේ කොටසින් CSS ඉවර වෙනවා. අපි ඊලග පාර ඉදන් Software engineering basic theories කථා කරමු.