Position
เนเธเนเธเธงเธดเธเธตเธเธฒเธฃเนเธชเธเธเธเธฅเนเธเธขเธกเธตเธซเธฅเธฒเธขเนเธเธเนเธเนเธเธเนเธฒเธเธเธฑเธเนเธ เนเธฃเธฒเธชเธฒเธกเธฒเธฃเธเนเธขเธเนเธเนเธเธฑเธเธเธตเน
- static
- relative
- absolute
- sticky
- fixed
Static
position:staticPosition Static
เนเธเนเธเธเนเธฒ default เธชเธณเธซเธฃเธฑเธเธเธธเธเนelement เธเธตเนเนเธฃเธฒเนเธกเนเนเธเนเธเธณเธซเธเธ position เธกเธฑเธเธเนเธเธฐเนเธญเธฒ static เนเธเนเธเนเธ position เนเธฃเธดเนเธกเธเนเธเนเธชเธกเธญ เธเธฒเธฃเนเธชเธเธเธเธฅเธเธญเธ static เธเนเธเธฃเธฃเธกเธเธฒเน เนเธกเนเธกเธตเธญเธฐเนเธฃเธเธดเนเธจเธฉ
Relative
position: relative;
bottom: 20px; /* เธซเนเธฒเธเธเธฒเธเธเนเธฒเธเธฅเนเธฒเธ 20px */
left: 150px; /* เธซเนเธฒเธเธเธฒเธเธเนเธฒเธเธงเนเธฒเธข 150px */Position Relative
เนเธชเธเธเธเธฅเธเธฅเนเธฒเธข static เนเธเนเธชเธฒเธกเธฒเธฃเธเนเธเนเธเธณเธชเธฑเนเธ top right bottom left เนเธเธเธฒเธฃเธเธณเธซเธเธเธเธณเนเธซเธเนเธเนเธเน เนเธเธข relative เธเธฐเนเธฃเธดเนเธกเนเธเธฅเธทเนเธญเธเธเธตเนเธเธฒเธ เธเธธเธเนเธเธดเธกเธเธตเนเธกเธฑเธเธญเธขเธนเน (เนเธเธ เธฒเธเธเธธเธเนเธเธดเธกเธเธทเธญเธเธฃเธญเธเธชเธตเนเธเธ)
เนเธฅเธฐเธเธธเธเนเธเธดเธกเธเธญเธเธกเธฑเธเธเนเธเธฐเนเธกเนเธกเธตเธญเธฐเนเธฃเธกเธฒเนเธเธเธเธตเนเธเธฐเนเธเนเธเธเธทเนเธเธเธตเนเธงเนเธฒเธเน
Absolute
position: absolute;
bottom: 20px; /* เธซเนเธฒเธเธเธฒเธเธเนเธฒเธเธฅเนเธฒเธ 20px */
left: 150px; /* เธซเนเธฒเธเธเธฒเธเธเนเธฒเธเธงเนเธฒเธข 150px */Position Absolute
เนเธชเธเธเธเธฅเธเธฅเนเธฒเธข relative เธชเธฒเธกเธฒเธฃเธเนเธเนเธเธณเธชเธฑเนเธ top right bottom left เนเธเธเธฒเธฃเธเธณเธซเธเธเธเธณเนเธซเธเนเธเนเธเน เนเธเธข absolute เธเธฐเนเธฃเธดเนเธกเนเธเธฅเธทเนเธญเธเธเธตเนเธเธฒเธ element เธเธตเนเธเธฅเธธเธกเธกเธฑเธเธญเธขเธนเน เธซเธฒเธเนเธฃเธฒเนเธกเนเนเธเนเธเธณเธซเธเธเนเธซเนเธกเธต element เธเธฃเธญเธเธกเธฑเธเธญเธขเธนเน body เธเธฐเนเธเนเธ element เธเธตเนเธเธฃเธญเธเธกเธฑเธ
เธซเธฒเธเธเธนเธเธตเน เธเธกเธเธณเธซเธเธเนเธซเน relative เนเธฅเธฐ absolute เธกเธตเธเธงเธฒเธกเธซเนเธฒเธเธเธฒเธ bottom 20px เนเธเนเธฒเธเธฑเธ เนเธเนเนเธซเนเธเนเธซเธกเธงเนเธฒ abolute เธกเธฑเธเธญเธขเธนเนเธเธเธฅเธฐเธเธตเนเนเธเธฃเธฒเธฐabsolute เธกเธฑเธเธเธฑเธเธเธฒเธเธฅเนเธฒเธเธชเธธเธเธเธญเธ body เนเธเน relative เธกเธฑเธเธเธฑเธเธเนเธฒเธเธฅเนเธฒเธเธชเธธเธเธเธญเธเธเธณเนเธซเธเนเธเนเธเธดเธกเธเธญเธเธกเธฑเธ เนเธญเธฐ เธเธเนเธซเธก555 เธเธฑเนเธเธซเธฅเธฐ เธเธเธเนเธขเนเธญเธเนเธเธเธนเธฃเธนเธเธ เธฒเธ
เนเธฅเธฐเธเนเธเนเธฒเนเธเนabsoluteเธกเธฑเธเธเธฐเนเธกเนเธกเธตเธเธทเนเธเธเธตเนเธเธธเธเนเธเธดเธกเธเธญเธเธกเธฑเธเนเธเธ relative เธฅเธญเธเธชเธฑเธเนเธเธเธธเธชเธด STAITC เธญเธฑเธเธเธตเนเธชเธญเธ เธกเธฑเธเธกเธฒเธเธฑเธเนเธเธเธเธตเนABSOLUTE เนเธเธฅเธฐ เธเนเธฒเธเธเธเธฅเธฑเธเนเธเธญเนเธฒเธ relative
เนเธชเธฃเธดเธกเธเธดเธเธซเธเธถเนเธ เธเนเธฒเธญเธขเธฒเธเนเธเน absolute เนเธ element เธญเธฐเนเธฃเธชเธฑเธเธญเธขเนเธฒเธเนเธซเนเธเธณเธซเธเธเนเธซ เนparent element เธกเธต position:relative เธเนเธงเธข
Fixed
position:fixed;
right:0; /* เธซเนเธฒเธเธเธฒเธเธเนเธฒเธเธเธงเธฒ 0 เธเธนเธเธเนเธฒเธขเนเธเธทเธญ เธเธดเธเธเธฑเธเธเนเธฒเธเธเธงเธฒเนเธเนเธฅเธข*/Position Fixed
เนเธเนเธฒเนเธเธเนเธฒเธขเธกเธฒเธ เธชเธฒเธกเธฒเธฃเธเนเธเนเธเธณเธชเธฑเนเธ top right bottom left เนเธเธเธฒเธฃเธเธณเธซเธเธเธเธณเนเธซเธเนเธเนเธเน เนเธฅเธฐเธกเธฑเธเธเธฐ เธญเธขเธนเนเธเธฃเธเธเธฑเนเธเธซเธฅเธฐ เนเธกเนเธงเนเธฒเนเธฃเธฒเธเธฐเนเธฅเธทเนเธญเธเนเธเธฅเธทเนเธญเธเธเธตเนเธขเนเธญเธซเธเนเธฒเธเธญ เธขเธฑเธเนเธเธกเธฑเธเธเนเธเธฐเธญเธขเธนเนเธเธณเนเธซเธเนเธเนเธเธดเธก เธญเนเธญเนเธฅเธฐเธเนเธชเธฒเธกเธฒเธฃเธเนเธเนเธเธณเธชเธฑเนเธ top right bottom left เนเธเธเธฒเธฃเธเธณเธซเธเธเธเธณเนเธซเธเนเธเนเธเน
เธเธฑเธเธฃเธนเธเธเธกเนเธซเนเธกเธฑเธเธเธดเธเธเธฑเธเธเนเธฒเธเธเธงเธฒเธเนเธงเธขเธเธฒเธฃเนเธชเน right:0 เธขเนเธญเธเธขเธฒเธขเธกเธฑเธเธเนเธขเธฑเธเธเธดเธเธญเธขเธนเนเธเธฑเธเธเนเธฒเธเธเธงเธฒ
เนเธฅเธฐเนเธเนเธฒเธเธฑเธง fixed เธเนเนเธกเนเนเธชเธเธเธเธทเนเธเธเธตเนเธเธธเธเนเธเธดเธกเธเธญเธเธกเธฑเธเนเธซเธกเธทเธญเธเธเธฑเธ absolute เนเธฅเธขเนเธเธฃเธฒเธฐเธเธฐเธเธฑเนเธ
staticเธชเธตเธเนเธฒเธเธถเธเธกเธฒเธเธฑเธเนเธ เธเธ เธฅเธญเธเธเธนเธญเธฑเธเธเธตเน
เธ เธฒเธเธเนเธฒเธเธเนเธฒเธข เธเธฐเนเธซเนเธเธงเนเธฒ STATIC เธกเธฑเธเธกเธฒเธเธฑเธเธเธทเนเธเธเธตเนเนเธเธดเธกเธเธญเธ FIXED
เธ เธฒเธเธเธงเธฒ เธฅเธญเธเนเธญเธฒ right:0; เธญเธญเธ เธเธณเนเธซเน FIXED เธเธฅเธฑเธเธกเธฒเธญเธขเธนเนเธเธตเนเนเธเธดเธกเธเธฑเธ STATIC เนเธเธฅเธฐ
เนเธชเธกเธทเธญเธ Absolute เนเธฅเธฐ Fixed เธกเธฑเธเนเธเนเธ เธเธฅเนเธญเธ เธเธตเนเธฅเธญเธขเน เธญเธขเธนเนเธกเธฑเธเธเธถเธเนเธกเนเนเธชเธเธเธเธทเนเธเธเธตเนเนเธเธดเธก เนเธเธ Relative
Sticky
Position Sticky
position:sticky;
bottom:0; /* เนเธกเธทเนเธญ เนเธเนเธฒเธเธฅเนเธญเธเธเธตเนเธญเธขเธนเนเธเธตเน buttom เธกเธฑเธเธเธฐเธขเธถเธเธญเธขเธนเนเธเธฃเธเธเธฑเนเธเนเธกเนเนเธเนเธซเธ*/เธชเธฒเธกเธฒเธฃเธเนเธเนเธเธณเธชเธฑเนเธ top right bottom left เนเธเธเธฒเธฃเธเธณเธซเธเธเธเธณเนเธซเธเนเธเนเธเน เนเธเนเนเธเธตเนเธขเธงเน เธเธณเนเธซเธเนเธเนเธเธเธตเนเธเธตเนเธเธฐเนเธกเนเนเธเธฅเธทเนเธเธเธตเนเนเธเนเธฒ STICKY เนเธเนเธซเธเธซเธฃเธญเธเธเธฐเนเธเธตเธขเธเนเธเนเธงเนเธฒเนเธเนเธเธเธฒเธฃเธเธญเธเนเธเนเธฒ STICKY เธงเนเธฒเนเธกเธทเนเธญ เธกเธฑเธเธญเธขเธนเน เธซเนเธฒเธ top right bottom เธซเธฃเธทเธญ left เธเธญเธ element เธเธตเนเธเธฅเธธเธก(เนเธเธเธตเนเธเธตเนเธเธทเธญ body)เธเธณเธเธงเธเนเธเนเธฒเธเธตเน เนเธเนเธฒเธเธฑเนเธเธกเธฑเธเธเธฐเธขเธถเธเธเธทเนเธเธเธตเนเธญเธขเธนเนเธเธฃเธเธเธฑเนเธ
เธเธ เนเธเนเนเธกเธฒเธเธนเธ เธฒเธเธเธฅเธฒเธเธฃเธญเธ เธเธฑเธ
เธเธฐเนเธซเนเธเนเธเนเธงเนเธฒเธเธญเธเนเธฃเธ STICKY เธญเธขเธนเนเธเธตเนเนเธเธดเธก เธเธญเนเธฃเธฒเธขเนเธญเธซเธเนเธฒเธเธญเธกเธฒเนเธฃเธทเนเธญเธขเน STICKY เธญเธขเธนเนเธเธตเน bottom:0 เนเธกเธทเนเธญเนเธฃเธกเธฑเธเธเนเธเธฐเธขเธถเธเธญเธขเธนเนเธเธฃเธเธเธฑเนเธ
เธเธดเนเธเธเนเธฒเธข
เนเธเธทเนเธญเธญเธขเธฒเธเนเธเน code เนเธเธเธเธเธงเธฒเธกเธเธตเนเนเธเธจเธถเธเธฉเธฒเธเนเธเธฒเธกเธเธตเนเนเธฅเธขเธเธฃเธฑเธ
<!DOCTYPE html>
<html lang=โenโ>
<head>
<meta charset=โUTF-8">
<meta name=โviewportโ content=โwidth=device-width, initial-scale=1.0">
<title>Position</title>
<style>
.box{
width: 100px;
height: 100px;
border:solid 1px black;
}
#static{
position: static;
background-color: rgb(29, 199, 221)
}
#relative{
position: relative;
bottom: 20px;
left: 150px;
background-color: rgb(29, 221, 61)
}#absolute{
position: absolute;
left: 150px;
bottom: 20px;
background-color: rgb(189, 39, 151);
}#fixed{
position: fixed;
right: 0;
background-color: rgb(255, 147, 147);
}#sticky{
position: sticky;
position: -webkit-sticky;
bottom:0;
background-color: cornsilk;
}</style>
</style>
</head>
<body>
<div class=โboxโ id=โstaticโ>STATIC</div>
<div class=โboxโ id=โrelativeโ>RELATIVE</div>
<div class=โboxโ id=โabsoluteโ>ABSOLUTE</div>
<div class=โboxโ id=โfixedโ>FIXED</div>
<div class=โboxโ id=โstickyโ>STICKY</div>
</body>
</html>เธชเธฃเธธเธ
position เธเธฑเนเธเธกเธตเธซเธฅเธฒเธขเนเธเธ เธเธถเนเธเนเธเนเธฅเธฐเนเธเธเธเนเธกเธตเธเธฒเธฃเนเธชเธเธเธเธณเนเธซเธเนเธเนเธเธเธเนเธฒเธเธเธฑเธเนเธเธเธฑเนเธเธเธตเนเธเธงเธฃเธเธณเธเธงเธฒเธกเนเธเนเธฒเนเธเนเธเธทเนเธญเนเธเนเนเธซเนเนเธซเธกเธฒเธฐเธชเธกเธเธฑเธเธเธฒเธฃเธญเธญเธเนเธเธเนเธเธ เธฒเธขเธ เธฒเธเธซเธเนเธฒ เธเธญเธเธเธฃเธฑเธเธเธธเธ 555
เธเธญเธเธเธธเธเธเนเธญเธกเธนเธฅเธเธฒเธ:
https://medium.com/@danusoncheounsanguan/positon-%E0%B9%83%E0%B8%99-css-3a845b5b7515