Absolutní x Relativní pozicování – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Absolutní x Relativní pozicování – CSS – Fórum – Programujte.comAbsolutní x Relativní pozicování – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
selkir0
Stálý člen
12. 7. 2008   #1
-
0
-

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í?

Nahlásit jako SPAM
IP: 78.108.102.–
"Je lépe mlčet a být považován za blázna, než promluvit a odstranit tak všechny pochyby." [br] Abraham Lincoln [br] [br]"I cesta na stovky mil začíná prvním krokem"
Reklama
Reklama
Kobi
~ Moderátor
+1
Věrný člen
12. 7. 2008   #2
-
0
-

To selkir : Relativní x absolutní případ od případu podle toho co chceš udělat, nneí žádný univerzální návod co dělat čím.

Nahlásit jako SPAM
IP: 213.250.243.–
Colpik0
Super člen
12. 7. 2008   #3
-
0
-

Relativní 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ě!

Nahlásit jako SPAM
IP: 78.102.176.–
Pavel 'Colpik' Tobiáš - Developer & Music Producer [br] http://colpik.webstudio4u.eu
selkir0
Stálý člen
12. 7. 2008   #4
-
0
-

To Colpik : a to se dá také nějak šikovně vyřešit

Nahlásit jako SPAM
IP: 78.108.102.–
"Je lépe mlčet a být považován za blázna, než promluvit a odstranit tak všechny pochyby." [br] Abraham Lincoln [br] [br]"I cesta na stovky mil začíná prvním krokem"
Colpik0
Super člen
12. 7. 2008   #5
-
0
-

To selkir : Leda JavaScriptem.

Nahlásit jako SPAM
IP: 78.102.176.–
Pavel 'Colpik' Tobiáš - Developer & Music Producer [br] http://colpik.webstudio4u.eu
bukaj0
Věrný člen
12. 7. 2008   #6
-
0
-

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?

Nahlásit jako SPAM
IP: 85.70.13.–
Jak se správně ptát? -> http://www.hash.cz/inferno/otazky.html[br][br] Po programování je člověk hladovej.
selkir0
Stálý člen
12. 7. 2008   #7
-
0
-

To bukaj : a ne náhodou od elementu víš ale s position absolute?

Nahlásit jako SPAM
IP: 194.213.34.–
"Je lépe mlčet a být považován za blázna, než promluvit a odstranit tak všechny pochyby." [br] Abraham Lincoln [br] [br]"I cesta na stovky mil začíná prvním krokem"
bukaj0
Věrný člen
12. 7. 2008   #8
-
0
-
Nahlásit jako SPAM
IP: 85.70.13.–
Jak se správně ptát? -> http://www.hash.cz/inferno/otazky.html[br][br] Po programování je člověk hladovej.
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žit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 9 hostů

Podobná vlákna

Relativní a Absolutní cesta — založil Aricak

Absolutní pozicování — založil spartan13

Relativní cesta — založil Radmill

Relativní cesta k souboru — založil Colpik

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý