Savybė left

Savybė left nustato kairiojo elemento krašto padėtį. Savybės reikšmes galima nurodyti su visuotinai priimtais dydžio vienetais, pavyzdžiui, pikseliais, coliais, punktais, procentais. Nurodytos reikšmės gali būti ir neigiami skaičiai, tokiu atveju elementai bus dedami vienas ant kito. Koordinačių atskaitą nustato savybė position, kuri paprastai įgauna reikšmę relative (santykinė padėtis) arba absolute (absoliuti padėtis).

Sintaksė

selektorius {
	left: dydis arba auto;
}

Pavyzdys

Kai užvedame pelės žymeklį ant vaikinio elemento, nustatykime jo kairiosios krašto padėtį lygią 25px:

<div id="elem">
	<p></p>
</div>

#elem {
	width: 400px;
	height: 300px;
	border: 1px solid black;
}
p {
	position: relative;
	width: 100px;
	height: 100px;
	border: 1px solid red;
	margin-left: 50px;
}
p:hover {
	left: 25px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

Pavyzdys

Dabar, kai užvedame pelės žymeklį, kairysis kraštas vaikinio elemento bus išdėstytas -50px atstumu:

<div id="elem">
	<p></p>
</div>

#elem {
	width: 400px;
	height: 300px;
	border: 1px solid black;
}
p {
	position: relative;
	width: 100px;
	height: 100px;
	border: 1px solid red;
	margin-left: 50px;
}
p:hover {
	left: -50px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

Taip pat žiūrėkite

savybė bottom,
kuri nustato apatinio elemento krašto padėtį
savybė top,
kuri nustato viršutinio elemento krašto padėtį
savybė right,
kuri nustato dešiniojo elemento krašto padėtį
pseudoelementas ::backdrop,
kuris nustato išdėstymą po pirmuoju elementu