Bottom savybė

Savybė bottom nustato elemento apatinio krašto padėtį. Reikšmės šiai savybei gali būti įrašytos su visuotinai priimtais matavimo vienetais, pavyzdžiui, pikseliais, coliais, punktais, procentais. Nustatytos reikšmės gali būti ir neigiami skaičiai, tokiu atveju elementai bus dedami vienas ant kito. Koordinačių atskaitą nustato savybė position, kuri paprastai įgauna reikšmę relative (santykinė padėtis) arba absolute (absoliuti padėtis).

Sintaksė

cssselektorius {
  bottom: skaičius su matavimo vienetu arba auto;
}

Pavyzdys

Užvedus pelę ant vaikinio elemento nustatykime jo apatinės kraštinės padėtį lygią 25px:

html<div id="elem">
  <p></p>
</div>

css#elem {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}
p {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-top: 50px;
}
p:hover {
  bottom: 25px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Pavyzdys

Dabar užvedus pelę apatinė vaikinio elemento kraštinė bus išdėstyta -50px:

html<div id="elem">
  <p></p>
</div>

css#elem {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}
p {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-top: 50px;
}
p:hover {
  bottom: -50px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Taip pat žiūrėkite