HTML dhe CSS

Shtresa mbi shtresën tjetër

Shqipëri, t'qofsha falë,
t'kam nënë e m'ke djalë.

Si mund të vendoset shtresa mbi një tjetër?

Brenda elementit (<div></div>) (division) mund të futet përmbajtje në një faqe të uebit. Pa CSS tregohen këta përmbajtës pas njëri tjetrit sikur që janë shkruar në kodin HTML dhe nuk kanë asnjë efekt në mënyrën se si tregohen.

Me CSS kemi mundësi që këta përmbajtës ti vendosim si shtresa mbi njëra tjetrën, sikur në shembullin këtu, duke ia dhënë shtresës së parë pozitën relative dhe shtresës së dytë me tekst brenda saj pozitën absolute.

  Kodi i projektimit të kornizës
HTML
<div class="shtresa-01">
<div class="shtresa-02"> 
Shqipëri, t'qofsha falë,<br />
t'kam nënë e m'ke djalë.
</div> 
</div>
CSS
.shtresa-01 {
  position: relative;
  background-image:url("images/sfondi.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 240px;
  border-radius: 6px;
}

.shtresa-02 {
  position: absolute;
  background: rgba(226, 142, 82, 0.29);
  color: #ffffff;
  padding: 5px 20px;
  right: 0;
  bottom: 20px;
}
Anatomia e faqes HTML Ankorimi Audio Çka është gjuha HTML Çka janë stilet CSS Figura Formatimi i tekstit Fusha e formularit me datë Fusha e formularit me kohë Fusha e formularit pa efektin e shkëlqimit Klasa dhe identifikimi në CSS Kokëzimi Last Child dhe Not Last Child Lista me të dhëna Ndarësi i temës Nëntituj për audio ose video Paragrafi Përmbajtja e grupuar Projektim i kalendarit Projektim i fushës së formularit me zonë të tekstit Rrotullimi Stilet e lidhura Stilet e ngulitura Stilet rendore Shtresa mbi tjetrën Vërtetimi i fushës së formularit Video