Poziționarea cu top, right, bottom și left
Patru proprietăți mută elementele: top, right, bottom și left.
Au efect doar pe elementele poziționate, adică cele cu position setat la relative, absolute, fixed sau sticky.
Poziționarea textului peste o imagine
Învelește o imagine într-un container relative, apoi dă-i fiecărei etichete de text o poziție absolute cu offset-uri, iar textul va sta deasupra imaginii.
Exemplu
Etichetele stau în cele patru colțuri ale imaginii (stânga sus, dreapta sus, stânga jos, dreapta jos) și în centrul ei.
Prompt
O pagină HTML care poziționează text în diferite puncte peste o imagine folosind top/right/bottom/left.
Într-un bloc intern
<style>, creează un container relative care conține o zonă de imagine (folosește o casetă colorată în locul unei imagini). Adaugă etichete de text albe poziționate absolut în stânga sus, dreapta sus, stânga jos, dreapta jos și centru, fiecare plasată cu offset-uri top/right/bottom/left.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 400px;
}
.imagebox {
width: 400px;
height: 250px;
background-color: #4CAF50;
}
.container .text {
position: absolute;
color: white;
font-weight: bold;
}
.topleft {
top: 8px;
left: 16px;
}
.topright {
top: 8px;
right: 16px;
}
.bottomleft {
bottom: 8px;
left: 16px;
}
.bottomright {
bottom: 8px;
right: 16px;
}
.center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<div class="imagebox"></div>
<div class="text topleft">Top Left</div>
<div class="text topright">Top Right</div>
<div class="text bottomleft">Bottom Left</div>
<div class="text bottomright">Bottom Right</div>
<div class="text center">Centered</div>
</div>
</body>
</html>
Toate proprietățile CSS de poziționare
Proprietățile de poziționare pe scurt:
bottom— plasează marginea de jos a unei casete poziționate.clip— decupează o parte dintr-un element poziționat absolut.left— plasează marginea din stânga a unei casete poziționate.position— alege modul în care este poziționat un element.right— plasează marginea din dreapta a unei casete poziționate.top— plasează marginea de sus a unei casete poziționate.