Autor publikacji
Virtual Patriot - Administrator

pozycja złożona

Data publikacji
Ostatnio edytowano

Wyjaśnienie

Pozycję złożoną tworzymy za pomocą dokładnie dwóch wartości oddzielonych od siebie przynajmniej jednym białym znakiem (zazwyczaj znakiem spacji). Pierwsza wartość wskazuje na określoną pozycję w poziomie. Druga wartość wskazuje na określoną pozycję w pionie. Do utworzenia pozycji złożonej możemy wykorzystać następujące wartości: top, right, bottom, left, center. Pozycja złożona wskazuje na określoną krawędź elementu HTML, określony róg elementu HTML lub środkowy obszar elementu HTML.

różne podwójne wartości pozycjonujące

Porównanie podwójnych wartości pozycjonujących występujących w języku CSS.

Przykład

  background-position:left bottom;
obrazek, który został dodany do obszaru tła tego elementu "div" znajduje się przy lewym dolnym rogu tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-position" wraz z następującymi wartościami: "left bottom"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-image:url(https://webkod.pl/files/css/obrazek-01.png);
        background-repeat:no-repeat;
        background-position:left bottom;
        min-height:250px;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      obrazek, który został dodany do obszaru tła tego elementu "div" znajduje się przy lewym dolnym rogu tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "background-position" wraz z następującymi wartościami: "left bottom"
    </div>

  </body>
</html>

Interpretacja

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak