TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Stálý člen
Hoj,
chtěl bych se zaptat, co je lepší používat jestli absolutní nebo relativní pozicování. A jak je to s absolutním pozicováním a rozlišením, mění se s rozlišením rozmístění?
Fórum › CSS
Absolutní x Relativní pozicování
Nahlásit jako SPAM
IP: 78.108.102.–
Věrný člen
Super členRelativní pozicování se počítá od místá, kde je prvek původně položen. Čili pokud je prvek 10 pixelů od levého kraje,
position: relative;
left: 5px;ho posune na 15 (10 + 5) pixelů od kraje a
position: relative;
left: -5px;ho posune na 5 (10 - 5) pixelů od kraje. Dá se toho využít například při ladění nevyspytatelných bugů nebo třeba posunování klikatelného loga v hlavičce.
Absolutní pozicování se počítá od kraje stránky, čili
position: absolute;
left: 150px;prvek za všech okolností posune na 150px od kraje stránky. Pokud chceš, aby byl daný prvek (na všech rozlišeních) např. na třech čtvrtinách stránky z leva, musíš použít procenta
position: absolute;
left: 75%;a pokud chceš, aby byl např. 30px od pravého okraje, musíš použít "zpětný margin".
position: absolute;
left: 100%;
margin-left: -30px;Jinak pozor na vlastnost top. Je to vzdálenost od vrchního kraje stránky, ne prohlížeče. Při skrolování se prvek po stránce nebude posunovat - zůstane pevně na svém místě!
selkir
Jen bych doplnil Colpika, že ne vždy absolutní pozicování (position: absolute;) znamená od okraje stránky. Výchozí souřadnice pro umístění absolutně pozicovaného elementu se počítají od prvního nadřazeného relativně pozicovaného (position: relative;) elementu.
Takže například, když si necháš prohlížečem zobrazit následující kód, nedostaneš #bar na souřadnicích 100:100 od levého horního rohu stránky, ale na souřadnicích 100:100 od levého horního rohu #page:
<html>
<head>
<style type="text/css">
<!--
/* aby nám #page neuvízlo vlevo nahoře */
body {
text-align: center;
}
#page {
text-align: left;
margin: 0 auto;
padding: 0;
}
/* aby bylo vidět, kde který element je */
#page {
border: solid red 1px;
}
#bar {
border: solid green 1px;
}
/* a teď již to hlavní */
#page {
position: relative;
width: 500px;
height: 500px;
}
#bar {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
}
-->
</style>
</head>
<body>
<div id="page">
<div id="bar">ahoj</div>
</div>
</body>
</html>A nejsem si jistý, jestli je potřeba k zarovnání k pravému okraji používat "zpětný margin". Nestačilo by prostě použítí vlastnosti right?
To bukaj : a ne náhodou od elementu víš ale s position absolute?
selkir
a ne náhodou od elementu víš ale s position absolute?
Oprava. Tak tedy obojí pozicování (relative i absolute). Viz Vnořené pozice (http://www.jakpsatweb.cz/css/css-pozicovani.html#vnorene).
Zjistit počet nových příspěvků
Přidej příspěvek
Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!
Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku
×Vložení zdrojáku
×Vložení obrázku
×Vložení videa
Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
Uživatelé prohlížející si toto vlákno
Uživatelé on-line: 0 registrovaných, 10 hostů
Podobná vlákna
Relativní a Absolutní cesta — založil Aricak
Adresování - přímé, nepřímé, relativní, absolutní - příklady — založil shamania
Absolutní pozicování — založil spartan13
Relativní cesta — založil Radmill
Relativní cesta k souboru — založil Colpik
Moderátoři diskuze
