Wpisy otagowane ‘fixed’

Ustalanie pozycji elementów w CSS cz. 3.

czwartek, 3 Luty 2011

Pozycjonowanie fixed

Element w pierwotnym położeniu. Pozostaje w miejscu, w którym był po wczytaniu się strony.
Element dodatkowy

Ze względu na specyfikę pozycjonowania fixed pierwszy przykład umieściłem powyżej, tak by był widoczny od razu po załadowaniu strony w większości przeglądarek. Kod tego przykładu znajdziesz nieco niżej.

W pozycjonowaniu fixed określamy pozycje elementu względem krawędzi okna przeglądarki. Elementy występujące po elemencie pozycjonowanym zajmują miejsce tego elementu. Pozycje tradycyjnie ustala się właściwościami left, right, top i bottom. Pozycjonowanie fixed jest określane właściwością position: fixed;. Elementy pozycjonowane w ten sposób umieściłem 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="fixed1">Element w pierwotnym położeniu</div>
	<div class="dodatkowy">Element dodatkowy</div>
</div>
#fixed1
{
	position: fixed;
}
.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;
}


<div class="ramka">
	<div class="border" id="fixed2">
	Element z właściwościami top: 90px; right: 40px; - odsunięty od górnej i prawej krawędzi okna przeglądarki o 40 pikseli
	</div>
	<div class="dodatkowy">Element dodatkowy</div>
</div>
#fixed2
{
	position: fixed;
	top: 90px;
	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ściami top: 90px i right: 40px; – odsunięty od górnej 90 pikseli i prawej krawędzi okna przeglądarki o 40 pikseli
Element dodatkowy


Pozycjonowanie statyczne

Ostatnim typem pozycjonowania jest pozycjonowanie statyczne. Oznaczane jest właściwością position: static;. Jest to domyślne pozycjonowanie. Mają je wszystkie elementy na stronie, którym nie zmieniono właściwości position. Czasami zachodzi konieczność jawnego użycia pozycjonowania statycznego. Przyjrzyjmy się przykładowi poniżej. Jeden z bloków div jest pozycjonowany względnie (position: relative). Wstawiony do jego wnętrza kolejny blok div automatycznie ma tę samą właściwość.

<div class="ramka" id="relative">
	<div class="border">
		Element z właściwościami left: 40px; i top: -50px - pozycjonowany względnie.
		<div class="border">
			Element ma to samo pozycjonowanie, co element nadrzędny.
		</div>
	</div>
	<div style="margin: 8px; padding: 12px; background-color: #33ff99; color: #ffffff; font-weight: bold;">
		Element dodatkowy</div>
	</div>
#relative div
{
	position: relative;
	left: 40px;
	top: -50px;
}
.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 – pozycjonowany względnie.
Element przejmuje pozycjonowanie elementu nadrzędnego.
Element dodatkowy


Jeżeli chcielibyśmy usunąć pozycjonowanie dla wewnętrznego bloku, musimy użyć position: static

<div class="ramka" id="relative">
	<div class="border">
		Element z właściwościami left: 40px; i top: -50px - pozycjonowany względnie.
		<div class="border" id="static">
			Element z usuniętym pozycjonowaniem dzięki właściwości <em>position: static</em>.
		</div>
	</div>
	<div style="margin: 8px; padding: 12px; background-color: #33ff99; color: #ffffff; font-weight: bold;">
		Element dodatkowy</div>
	</div>
#relative div
{
	position: relative;
	left: 40px;
	top: -50px;
}
#static
{
	position: static;
}
.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 – pozycjonowany względnie.
Element z usuniętym pozycjonowaniem dzięki właściwości position: static.
Element dodatkowy

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