2010-12-20 01:31:49

Ustalanie pozycji elementów w CSS cz. 1.

Pozycjonowanie względne

W pozycjonowaniu względnym możemy przesuwać element względem pierwotnego położenia. Służą do tego właściwości left, right, top i bottom. Samo pozycjonowanie względne jest określane właściwością position: relative;. Poniżej przedstawiłem element pozycjonowany względnie w czerwonym obramowaniu. Dla większej jasności elementy pozycjonowane umieszczam w elemencie z szaro-niebieską ramką.

<div class="ramka">
	<div class="border" id="relative1">Element w pierwotnym położeniu</div>
</div>
#relative1
{
	position: relative;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
Element w pierwotnym położeniu


<div class="ramka">
	<div class="border" id="relative2">
	Element z właściwością left: 40px; - odsunięty od lewej krawędzi pierwotnego położenia o 40 pikseli
	</div>
</div>
#relative2
{
	position: relative;
	left: 40px;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
Element z właściwością left: 40px; – odsunięty od lewej krawędzi pierwotnego położenia o 40 pikseli


<div class="ramka">
	<div class="border" id="relative3">
	Element z właściwością right: 40px; - odsunięty od prawej krawędzi pierwotnego położenia o 40 pikseli
	</div>
</div>
#relative3
{
	position: relative;
	right: 40px;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
Element z właściwością right: 40px; – odsunięty od prawej krawędzi pierwotnego położenia o 40 pikseli


<div class="ramka">
	<div class="border" id="relative4">
	Element z właściwością bottom: 10px; - odsunięty od dolnej krawędzi pierwotnego położenia o 10 pikseli
	</div>
</div>
#relative4
{
	position: relative;
	bottom: 10px;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
Element z właściwością bottom: 10px; – odsunięty od dolnej krawędzi pierwotnego położenia o 10 pikseli


<div class="ramka">
	<div class="border" id="relative5">
	Element z właściwością top: 10px; - odsunięty od górnej krawędzi pierwotnego położenia o 10 pikseli
	</div>
</div>
#relative5
{
	position: relative;
	top: 10px;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
Element z właściwością top: 10px; – odsunięty od górnej krawędzi pierwotnego położenia o 10 pikseli


<div class="ramka">
	<div class="border" id="relative6">
	Element z właściwościami left: 40px; i top: 15px - odsunięty od lewej krawędzi pierwotnego 
położenia o 40 pikseli oraz od górnej krawędzi o 15 pikseli
	</div>
</div>
#relative6
{
	position: relative;
	left: 40px;
	top: 15px;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
Element z właściwościami left: 40px; i top: 15px – odsunięty od lewej krawędzi pierwotnego położenia o 40 pikseli oraz od górnej krawędzi o 15 pikseli

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

Tagi: , ,

Dodaj odpowiedź