ទីតាំង

មេរៀន​នេះ មាន​ជា​វីដេអូ ។

មេរៀន​ជា​វីដេអូ

ក្នុង​មេរៀន​នេះ យើង​សិក្សា​អំពី position ដែល​តម្លៃ​របស់​វា​មាន ៖

static គឺ​ជា​តម្លៃ​ដើម​របស់ position ។ ដំណើរការ​របស់​វា ធម្មតា​ជាងគេ គឺ​វា​កំណត់​ទីតាំង​នៃ​ធាតុ​នោះ ទៅ​តាម​លំដាប់​លំដោយ ដូច​ដែល​យើង​សរសេរ​ក្នុង​កូដ ។ តម្លៃ​ផ្សេងៗ​ពី​នេះ​ទៀត មាន​ភាព​សាំញ៉ាំ ដែល​យើង​នឹង​សិក្សា​នូវ​ចំណុច​ក្រោយ ។

តម្លៃ fixed

position តម្លៃ fixed ធ្វើ​ឲ្យ​ធាតុ មាន​ទីតាំង​ផ្ដាច់​ពី​គេ​ពី​ឯង ហើយ​វា​នឹង​នៅ​នឹង​ជាប់ ទោះ​ជា​ទំព័រ​ត្រូវ​បាន​រំកិល​ក៏​ដោយ ។ កាល​ណា​កំណត់​បន្ថែម​នូវ top, right, bottomleft គឺ​វា​គិត​ចាប់​ពី​គែម​នេះ viewport ។

#a {
    background: pink;
    height: 300vh;
}
#b {
    background: aqua;
    top: 50px;
    left: 30%;
    width: 125px; height: 125px;
    position: fixed;
}
<div id="a">សាករំកិល ឡើង​លើ ចុះក្រោម<div id="b">បើ​អ្នក​ស្រឡាញ់​ការ​សិក្សា​មួយ​នេះ សូម​ជួយ​ចែក​រំលែក ។</div></div>

តម្លៃ relative

position តម្លៃ relative ធ្វើ​ឲ្យ​ទីតាំង​នៃ​ធាតុ​នោះ មាន​ទំនាក់ទំនង​ទៅ​នឹង​ទីតាំង​ធម្មតា​របស់​វា ។ កាល​ណា​កំណត់​បន្ថែម​នូវ top, right, bottomleft វា​គិត​ចាប់​ពី​ចំណុច​ដែល​វា​កំពុង​ស្ថិត​នៅ ។

div {
    width: 100px; height: 100px;
    padding: 15px;
    display: block;
}
#a {
    background: pink;
}
#b {
    background: aqua;
    top: -30px;
    left: 40px;
    position: relative;
}
<div id="a">KHODE គឺ​ឥត​គិត​ថ្លៃ​សំរាប់​ថ្ងៃ​នេះ និង​ជា​និរន្តរ៍ ។</div>
<div id="b">បើ​អ្នក​ស្រឡាញ់​ការ​សិក្សា​មួយ​នេះ សូម​ជួយ​ចែក​រំលែក ។</div>

តម្លៃ absolute

position តម្លៃ absolute ធ្វើ​ឲ្យ​ធាតុ មាន​ទីតាំង​ផ្ដាច់​ពី​គេ​ពី​ឯង តែ​វា​មិន​ជាប់​នឹង viewport ដូច fixed ទេ ។ កាល​ណា​កំណត់​បន្ថែម​នូវ top, right, bottomleft គឺ​វា​គិត​ចាប់​ពី​គែម viewport ឬ​គែម​នៃ​ធាតុ​ដែល​ផ្ទុកវា​ក្នុង​ករណី​ដែល​ធាតុ​នោះ​មាន position:relativeposition:absolute ។

#a {
    margin: 50 0 0;
    background: pink;
    height: 200vh;
}
#b {
    background: aqua;
    top: 50px;
    left: 50%;
    width: 150px; height: 150px;
    position: absolute;
}
<div id="a">សាក​បន្ថែម position:relative ទៅ​ឲ្យ​ធាតុដែល​មាន id a ។​<div id="b">បើ​អ្នក​ស្រឡាញ់​ការ​សិក្សា​មួយ​នេះ សូម​ជួយ​ចែក​រំលែក ។</div></div>

តម្លៃ sticky

position តម្លៃ sticky ធ្វើ​ឲ្យ​ធាតុ មាន​ទីតាំង​ប្រែប្រួល​ទៅ​តាម​ការ​រំកិល​របស់​ទំព័រ ។

តម្លៃ​មួយ​នេះ មិន​ត្រូវ​បាន​ទ្រទ្រង់​គ្រប់ web browser នោះ​ទេ ។

div {
    height: 50%;
    background: pink;
}
div {
    height: 50%;
    background: pink;
}
.nav {
    height: 50px;
    background: gray;
    position: sticky;

    /* សំរាប់ web browser មួយ​ចំនួន */
    position: -webkit-sticky;

    /* ពេល fixed
    វា​នឹង​ឃ្លាត 10px ពី​លើ */
    top: 10px;
}
<div></div>
<div class="nav"></div>
<div></div>
<div></div>
<div></div>
<div></div>
ទំព៏រ​ដើម កូដ វីដេអូ បញ្ជី ចែករំលែក បោះពុម្ភ ឡើង​លើ Facebook Google Plus Twitter មតិ ឧបត្ថម្ភ ទំនាក់ទំនង អាជ្ញាប័ណ្ឌ សិទ្ធ​អ្នក​និពន្ធ បិទ Khode Academy មុន បន្ទាប់ ប្ដូរ​ម៉ូត