Inne działy

 

 

CSS - Pozycjonowanie

 

CSS ułatwia pozycjonować elementy HTML. Można umieścić dowolny element HTML niezależnie od miejsca. Można określić, czy element ma być umieszczony w stosunku do swojej naturalnej pozycji na stronie lub o bezwzględną pozycję w oparciu o jego element nadrzędny.

Teraz zobaczymy wszystkie właściwości powiązane z przykładami pozycjonowania CSS:

Pozycjonowanie względne:

Pozycjonowanie względne to zmiany położenia elementu kodu HTML, w stosunku, do których zwykle pojawia się. Tak, więc "left: 20" dodaje 20 pikseli do elementu po lewej stronie.

Aby przenieść element HTML gdziekolwiek w dokumencie HTML, można użyć dwóch wartości właściwości top i left. Oto szybkie odniesienia podczas przenoszenia elementów HTML w CSS.

  • Przesuń w lewo - Użyj wartość ujemną dla left.
  • Przesuń w prawo - Użyj wartość dodatnią dla left.
  • Przesuń w górę - Użyj wartość ujemną dla top.
  • Przesuń w dół - Użyj wartość dodatnią dla top.

Uwaga: Możesz użyć bottom (dolnej) lub right (prawej) wartości także w taki sam sposób jak top i left.

Oto przykład: 

<div style="position:relative;left:80px;top:2px;
            background-color:yellow;">
Ten div ma Pozycjonowanie względne.
</div>

 Poniżej wynik działania kodu:

Ten div ma Pozycjonowanie względne.

 

Pozycjonowanie bezwzględne:

Element z pozycją: bezwzględną jest umieszczony w określonych współrzędnych względem górnego lewego rogu ekranu.

Aby przenieść HTML element gdziekolwiek w dokumencie HTML, można użyć dwóch wartości właściwości top i left. Oto szybkie odniesienia podczas przenoszenia elementów HTML w CSS.

  • Przesuń w lewo - Użyj wartość ujemną dla left.
  • Przesuń w prawo - Użyj wartość dodatnią dla left.
  • Przesuń w górę - Użyj wartość ujemną dla top.
  • Przesuń w dół - Użyj wartość dodatnią dla top.

Uwaga: Możesz użyć wartości bottom (dolnej) lub right (prawej) także w taki sam sposób jak top i left.

Oto przykład:

<div style="position:absolute;left:80px;top:20px;
            background-color:yellow;">
Ten div ma absolutne pozycjonowanie.
</div>

 

Stałe pozycjonowanie:

Stałe pozycjonowanie pozwala na ustalenie położenia elementu do określonego miejsca na stronie - niezależnie od przewijania. Określone współrzędne będą względem okna przeglądarki.

Aby przenieść HTML element gdziekolwiek w dokumencie HTML, można użyć dwóch wartości właściwości top i left. Oto szybkie odniesienia podczas przenoszenia elementów HTML w CSS.

  • Przesuń w lewo - Użyj wartość ujemną dla left.
  • Przesuń w prawo - Użyj wartość dodatnią dla left.
  • Przesuń w górę - Użyj wartość ujemną dla top.
  • Przesuń w dół - Użyj wartość dodatnią dla top.

Uwaga: Możesz użyć wartości bottom (dół) lub right (prawo) także w taki sam sposób jak top i left.

Oto przykład:

 

<div style="position:fixed;left:80px;top:20px;
            background-color:yellow;">
Ten div ma stałe pozycjonowanie.
</div>

 

Zobacz nasze wszystkie kursy

WWW


HTML
HTML - Znaczniki
CSS - Tutorial
CSS - Selektory
PHP
JavaScript

XML

XSLT

Bazy danych


SQL
SQLite
MySQL
PostgreSQL

 

 

Programowanie


C
C++
C#
Java
VisualBasic
Python

Linux


Podstawy Linuxa
Bash
Linuks artykuły

Windows


Excel funkcje
Windows wskazówki
Outlook

Pozotałe działy


Programy
Rozrywka

 

 

 

This email address is being protected from spambots. You need JavaScript enabled to view it.