Eienskap bottom

Die eienskap bottom spesifiseer die posisie van die onderste rand van 'n element. Waardes vir die eienskap kan geskryf word met algemeen aanvaarde maateenhede, bv. in pixels, duim, punte, persentasies. Die gespesifiseerde waardes kan ook negatiewe getalle wees, in hierdie geval sal elemente oor mekaar geplaas word. Die berekening van koördinate word bepaal deur die eienskap position, wat gewoonlik die waarde relative (relatiewe posisie) of absolute (absoloute posisie) aanneem.

Sintaksis

cssselekteerder {
  bottom: getal met 'n meeteenheid of auto;
}

Voorbeeld

Kom ons stel die posisie van die onderste rand van die kindelement gelyk aan 25px wanneer daar daaroor gehover word:

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;
}

Результат:

Voorbeeld

En laat ons nou die onderste rand van die kindelement plaas op -50px wanneer daar daaroor gehover word:

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;
}

Результат:

Sien ook