position គឺជា property ប្រើសំរាប់កំណត់ពីស្ថានភាពនៃទីតាំងរបស់ element ។ តំលៃសំរាប់ property នេះមានប្រាំគឺ static, relative, fixed, absolute , sticky ។
static ជាស្ថានភាពនៃទីតាំងធម្មតារបស់ element នៅពេលដែលត្រូវបានបង្កើតរួចហើយ។ ពោលគឺការប្រើប្រាស់ property top, bottom, left, right គ្មានឥទ្ធិពលអ្វីទៅលើ element ដែលមានស្ថានភាពទីតាំងធម្មតា ឬដែលមាន property position មានតំលៃជា static ។
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Position Property</title>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
position: static;
An element with position: static; is not positioned in any special way; it is
always positioned according to the normal flow of the page:
This div element has position: static;
</body>
</html>
position: static;
An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:
ក៏ប៉ុន្តែ សំរាប់ element ដែលមានទីតាំងស្ថានភាពឬ position របស់វាមានតំលៃជា relative វានឹងរងឥទ្ធិពលពី top, bottom, left, right property ធៀបទៅនឹង element មេរបស់វា។
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Position Property</title>
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
position: relative;
An element with position: relative; is positioned relative to its normal position:
This div element has position: relative;
</body>
</html>
position: relative;
An element with position: relative; is positioned relative to its normal position:
ចំណែកឯ element ដែលមាន postion មានតំលៃជា fixed មានទីតាំងនឹងថ្កល់ ធៀបទៅនឹងអេក្រង់ទាំងមូល។
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Position Property</title>
<style>
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
position: fixed;
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:
This div element has position: fixed;
</body>
</html>
position: fixed;
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:
ចំពោះ element ដែលមាន position មានតំលៃ absolute ស្ថិតនៅក្នុង element មេដែលមាន position មានតំលៃជា relative ឬ absolute មានស្ថានភាពទីតាំងរបស់វាត្រូវបានកំណត់ឡើងដោយធៀបទៅនឹង element មេ និងទទួលរងឥទ្ធិពលពី top, bottom, left, right property។
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Position Property</title>
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
position: absolute;
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):
This div element has position: relative;
This div element has position: absolute;
</body>
</html>
position: absolute;
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):
តំលៃ absolute មានសារសំខាន់នៅពេលណាដែលយើងចង់អោយ element ផ្សេងៗអាចមានទីតាំងស្ថិតនៅជាន់លើគ្នាបាន។
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Position Property</title>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
This is a heading
</body>
</html>
This is a heading
ចំពោះ element ដែលមាន position មានតំលៃជា sticky វិញ យើងអាចកំណត់អោយវាមានស្ថានភាពទីតាំងជា element មាន position មានតលៃជា fixed នៅក្នុងចំងាយណាមួយពីផ្នែកខាងលើគេបង្អស់របស់ element មេ។
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Position Property</title>
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
Try to scroll inside this frame to understand how sticky positioning works.
Note: IE/Edge 15 and earlier versions do not support sticky position.
I am sticky!
In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.
Scroll back up to remove the stickyness.
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
</body>
</html>
Try to scroll inside this frame to understand how sticky positioning works.
Note: IE/Edge 15 and earlier versions do not support sticky position.
In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.
Scroll back up to remove the stickyness.
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
