CSS-de elementleriň absolýut pozisionirlenmesi

Bu sapakda biz elementleriň absolýut pozisionirlenmesini düşünjeler. Bu sahypanyň görkezilen koordinatalary boýunça elementleri ýerleşdirmäge mümkinçilik berýär. Mysal üçin, elementleri sahypanyň ýokarsyndan 100px we çep tarapyndan 200px mesafede ýerleşdirmek bolýar. Element ol ýere gidýär, ol ýerde beýleki elementleriň ýerleşýändigine garamazdan we diňe olaryň üstüne gelýär. Bu ýagdaýda element normal dokumyndan çykýar diýilýär: beýleki ähli elementler bizifi elementimiziň ýokdygy ýaly hereket eder.

Elementi absolýut pozisionirlemek üçin, bu elemente position häsiýetini absolute bahasynda bermek gerek. Bu häsiýetden başga-da, ýene iki sany gerek: biri dikeý koordinatany, beýlekisi bolsa gorizontal koordinatany berer.

Dikeý üçin ýokardan ýa-da aşakdan boşluk bermek gerek. Ýokardan boşluk top häsiýeti bilen berilýär, aşakdan boşluk bolsa bottom häsiýeti bilen berilýär. Gorizontal üçin çepden ýa-da sagdan boşluk bermek gerek. Çepden boşluk left häsiýeti bilen berilýär, sagdan boşluk bolsa right häsiýeti bilen berilýär.

Geliň mysallara seredeliň.

Mysal

Ilki bilen, diňe iki blogy pozisionirlemezden edeliň (elementleriň penceräniň gyrasyna ýapysyk däl digine üns beriň, sebäbi body bellenen margin-e eýe):

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Mysal

Indi ýaşyl bloga absolýut pozisionirleme bereliň, ony ýokardan 150px we çepden 100px pozisiýa goýup:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 150px;
	left: 100px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Mysal

Indi ýaşyl blogy 0px ýokardan we 0px çepden pozisiýa goýalyň:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Mysal

Indi ýaşyl blogy 0px ýokardan we 0px sagdan pozisiýa goýalyň:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Mysal

Indi ýaşyl blogy 0px aşakdan we 0px sagdan pozisiýa goýalyň:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Mysal

Indi ýaşyl blogy 0px aşakdan we 0px çepden pozisiýa goýalyň:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Amaly wezipeler

Absolýut pozisionirleme ýardamynda bloglary aşakdaky ýaly ýerleşdiriň: