2011-01-11 11:34:22

Ustalanie pozycji elementów w CSS cz. 2.

Pozycjonowanie absolutne

W pozycjonowaniu absolutnym określamy pozycje elementu względem kontenera. Kontenerem zazwyczaj jest element body, może też być nim inny element z właściwością position ustawioną na relative, absolute lub fixed. Elementy występujące po elemencie pozycjonowanym zajmują miejsce tego elementu. Pozycje tradycyjnie ustala się właściwościami left, right, top i bottom. W przypadku gdy ustalamy właściwość top, a kontenerem jest element body, pozycja jest liczona od dolnej krawędzi części widocznej po załadowaniu strony. Samo pozycjonowanie absolutne jest określane właściwością position: absolute;. Poniżej przedstawiłem element pozycjonowany absolutnie w czerwonym obramowaniu. Dla większej jasności po elemencie pozycjonowanym umieściłem element dodatkowy (zielone tło), a całość umieszczam w elemencie z szaro-niebieską ramką.

<div class="ramka">
	<div class="border" id="absolute1">Element w pierwotnym położeniu</div>
	<div class="dodatkowy">Element dodatkowy</div>
</div>

#absolute1
{
	position: absolute;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
	background-color: #ffffff;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
.dodatkowy
{
	margin: 8px;
	padding: 12px;
	background-color: #33ff99;
	color: #ffffff;
	font-weight: bold;
}

Element w pierwotnym położeniu

Element dodatkowy

<div class="ramka">
	<div class="border" id="absolute2">
	Element z właściwością left: 40px; - odsunięty od lewej krawędzi kontenera o 40 pikseli
	</div>
	<div class="dodatkowy">Element dodatkowy</div>
</div>

#absolute2
{
	position: absolute;
	left: 40px;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
	background-color: #ffffff;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
.dodatkowy
{
	margin: 8px;
	padding: 12px;
	background-color: #33ff99;
	color: #ffffff;
	font-weight: bold;
}

Element z właściwością left: 40px; – odsunięty od lewej krawędzi kontenera o 40 pikseli

Element dodatkowy

<div class="ramka">
	<div class="border" id="absolute3">
	Element z właściwością right: 40px; - odsunięty od prawej krawędzi kontenera o 40 pikseli
	</div>
	<div class="dodatkowy">Element dodatkowy</div>
</div>

#absolute3
{
	position: absolute;
	right: 40px;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
	background-color: #ffffff;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
.dodatkowy
{
	margin: 8px;
	padding: 12px;
	background-color: #33ff99;
	color: #ffffff;
	font-weight: bold;
}

Element z właściwością right: 40px; – odsunięty od prawej krawędzi kontenera o 40 pikseli

Element dodatkowy

<div class="ramka">
	<div class="border" id="absolute4">
	Element z właściwością bottom: 10px; - odsunięty od dolnej krawędzi kontenera o 10 pikseli
	</div>
	<div class="dodatkowy">Element dodatkowy</div>
</div>

#absolute4
{
	position: absolute;
	bottom: 10px;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
	background-color: #ffffff;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
.dodatkowy
{
	margin: 8px;
	padding: 12px;
	background-color: #33ff99;
	color: #ffffff;
	font-weight: bold;
}

Element z właściwością bottom: 10px; – odsunięty od dolnej krawędzi kontenera o 10 pikseli

Element dodatkowy

<div class="ramka">
	<div class="border" id="absolute5">
	Element z właściwością top: 3500px; - odsunięty od górnej krawędzi kontenera o 3500 pikseli
	</div>
	<div class="dodatkowy">Element dodatkowy</div>
</div>

#absolute5
{
	position: absolute;
	top: 3500px;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
	background-color: #ffffff;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
.dodatkowy
{
	margin: 8px;
	padding: 12px;
	background-color: #33ff99;
	color: #ffffff;
	font-weight: bold;
}

Element z właściwością top: 3500px; – odsunięty od górnej krawędzi kontenera o 3500 pikseli

Element dodatkowy

<div class="ramka">
	<div class="border" id="absolute6">
	Element z właściwościami left: 40px; i top: 4500px - odsunięty od lewej krawędzi kontenera o 40 pikseli oraz od górnej krawędzi o 4500 pikseli
	</div>
	<div class="dodatkowy">Element dodatkowy</div>
</div>

#absolute6
{
	position: absolute;
	left: 40px;
	top: 4500px;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
	background-color: #ffffff;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
.dodatkowy
{
	margin: 8px;
	padding: 12px;
	background-color: #33ff99;
	color: #ffffff;
	font-weight: bold;
}

Element z właściwościami left: 40px; i top: 4500px – odsunięty od lewej krawędzi kontenera o 40 pikseli oraz od górnej krawędzi o 4500 pikseli

Element dodatkowy

<div class="ramka" id="relative">
	<div class="border" id="absolute7">
	Element z właściwościami left: 40px; i top: 50px - odsunięty od lewej krawędzi kontenera o 40 pikseli oraz od górnej krawędzi o 50 pikseli. W tym przypadku kontenerem jest element o identyfikatorze relative.
	</div>
	<div class="dodatkowy">Element dodatkowy</div>
</div>

#absolute6
{
	position: absolute;
	left: 40px;
	top: 50px;
}
#relative
{
	position: relative;
	left: -30px;
	top: 10px;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
	background-color: #ffffff;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
.dodatkowy
{
	margin: 8px;
	padding: 12px;
	background-color: #33ff99;
	color: #ffffff;
	font-weight: bold;
}

Element z właściwościami left: 40px; i top: 50px – odsunięty od lewej krawędzi kontenera o 40 pikseli oraz od górnej krawędzi o 50 pikseli. W tym przypadku kontenerem jest element o identyfikatorze relative.

Element dodatkowy

Zachęcam do pozostawieni swoich uwag i komentarzy poniżej.

Tagi: absolute, CSS, position

Ten wpis został opublikowany wtorek, 11 Styczeń 2011 o 11:34 i jest zaszufladkowany do kategorii Sekrety Webmasterów. Możesz śledzić wszystkie odpowiedzi do tego wpisu poprzezkanał RSS 2.0. Możesz dodać odpowiedź lub trackback ze swojej strony.

2 odpowiedzi do “Ustalanie pozycji elementów w CSS cz. 2.”

Olimpia_ona pisze:

2011-01-14 o 18:16

Panie Leszku, po tym co się wyświetla na tych szkoleniach o pozycjonowaniu można odnieść wrażenie, że na pozycjonowaniu się Pan nie do końca zna, a przynajmniej nie umie Pan przekazać tej wiedzy.
Otwierając te szkolenie pod IE 6 (takie mam) cała strona jest rozjechana, a i element właściwy jest inaczej wyświetlany w stosunku do przeglądarki Mozilla Firefox 3.6. Tylko niech Pan nie pisze, że należy aktualizować przeglądarki do najnowszych, bo przeciętni użytkownicy internetu tego nie robią np. ze względu na ograniczenia w wersji systemu jaki mają.
Taka rada: bezpieczniej byłoby gdyby prezentował Pan wyniki działania poszczególnych elementów na zrzucie ekranu pokazującym całą przeglądarkę, bo teraz np. to jeden element mam wyświetlony po części na tytule po części na tekście wprowadzającym i się zastanawiam, czy celowo, czy też po prostu ten kontener z szaro-niebieską ramką nie spełnił roli kontenera.
Pozdrawiam
Leszek Sewastianowicz pisze:

2011-01-15 o 00:54

Nie można ciągle oglądać się na IE 6, bo jeżeli tak, to dlaczego nie IE 5, IE 4, czy IE 3. Przy takim podejściu należałoby zupełnie zrezygnować z używania CSS-ów i wielu innych technologii. Dlaczego mam nie pisać, że należy aktualizować przeglądarkę? To bardzo wskazana czynność nie tylko ze względu na nowe możliwości, ale przede wszystkim na bezpieczeństwo. I większość to jednak robi. IE 6 jest obecnie używany przez mniej niż 3% internautów (dane wg. ranking.pl), a ze statystyk serwan.pl wynika, że większość to boty spamujące. Strony w IE 6 przestałem testować już ponad rok temu, gdy popularność tej przeglądarki znalazła się w okolicach 5%. Nie byłem pierwszy, bo wiele osób uważa, że należało to zrobić przy spadku poniżej 10%.

Dziękuję za radę, ale prezentowanie jak coś się zachowuje na stronie za pośrednictwem zrzutów ekranu przypomina mi pierwsze lata studiów, gdy uczono nas programować na kartkach w zeszycie. To, że elementy wyświetlają się na tytule i tekście wynika z podanych parametrów, które zostały opisane. We wszystkich przykładach poza ostatnim kontenerem jest element body, a szaro-niebieska ramka oznacza tylko pierwotne położenie elementów.

Pozdrawiam
…i proszę zaktualizować przeglądarkę.

Dodaj odpowiedź

Musisz się zalogować aby dodać komentarz.