Fiksno pozicioniranje div-a u odnosu na roditelja

m.stojanov · 05. 10. 2011.

Pozdrav ljudi. Radim neki template i evo sta sam zamislio:

Dakle ima #wrapper div koji je centriran i ima 900px. Aside element treba da bude fiksiran i tu se javlja problem - umesto da se fiksira u odnosu na wrapper, on se fiksira u odnosu na body. To je okej, zato sto u CSS specu za position: fixed i pise:

The value fixed generates an absolutely positioned box that’s positioned relative to the initial containing block (normally the viewport).

Ali, ja zelim da se fiksira u odnosu na wrapper, zato sto jedino tako mogu biti siguran da ce aside biti na pravom mestu za bilo koju rezoluciju. Evo koda:

...

Kôd:

<body>
	<div id="wrapper">		
		<div id="content">
		</div>
		<aside id="sidebar">
						
		</aside>
	</div>
</body>

Kôd:

#wrapper {
	position: relative;	
	width: 900px;
	margin: 0 auto;
}
#content {	
	width: 610px;
	float: left;
}
aside {
	position: absolute;
	top: 120px;
	left: 660px;	
	width: 240px;	
	height: 100%;
}

Kako biste vi resili ovakav problemcic?

AdriaMart · 05. 10. 2011.

Probaj da iskombinujes sa: position: fixed;

bluesman · 05. 10. 2011.

Ako sam ja razumeo problematiku, što ne staviš lepo da je float: right? Što mora da bude fixed?

Osim toga ali ti je #content već float:left, ovaj #aside i ne mora da buzde float, samo da ima margin-left:660px

m.stojanov · 05. 10. 2011.

^Zato sto nije bitno da bude samo desno, vec da se ne skroluje sa ostatkom strane.

Br@nkoR · 05. 10. 2011.

Nešto na brzinu:

HTML kôd:

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="utf-8"> 
    <title>Sample Page</title> 
    <style type="text/css">    
      html, body {
        margin: 0;
        padding: 0;
      }
      #wrapper {
      	width: 900px;
      	margin: 0 auto;
      	height: 3000px;
      }
      #content {	
      	width: 610px;
      }
      aside {
      	position: fixed;
      	top: 0;
      	left: 0;
      	width: 100%;
      }
      #sidebar_c {
      	width: 900px;
      	margin: 0 auto;
      	position: relative;
      }
      #sidebar_cc {
		float: right;
		margin-top: 120px;
		width: 240px;	
	 }
    </style> 
  </head> 
  <body> 
    <div id="wrapper">
      #wrapper		
      <div id="content">
        #content
      </div>
      <aside id="sidebar">
        <div id="sidebar_c">
          <div id="sidebar_cc">
            #sidebar
          </div>
        </div>  
      </aside>
    </div>
  </body> 
</html>

Testirao sam samo u Chrome.

Ili da korsitiš JavaScript za pozicioniranje fixed elementa u odnosu na poziciju i dimenzije #wrapper elementa.

m.stojanov · 05. 10. 2011.

Ovo radi. Gledam sad sta si radio i pokusavam da shvatim kako ovo radi.

Inace, nije jos uvek dobro zato sto si aside prelepio preko svih ostalih divova i ne moze uopste da se misem kopira tekst sa #content diva. Hvala puno, videcu kako da iskoristim ovu ideju.

Br@nkoR · 05. 10. 2011.

Dodaj css:

Kôd:

aside {
      	height: 0;
}

vukan · 06. 10. 2011.

Dovoljno je da (u kodu iz prvog posta) za sidebar stavis:

Kôd:

position: fixed; margin-left: 660px; top: 120px;

i to je to.

05. 10. 2011.	#1
m.stojanov novi član Na probnom radu Datum učlanjenja: 03.07.2009 Lokacija: Zajecar Poruke: 22 Hvala: 2 4 "Hvala" u 1 poruci	Fiksno pozicioniranje div-a u odnosu na roditelja Pozdrav ljudi. Radim neki template i evo sta sam zamislio: Dakle ima #wrapper div koji je centriran i ima 900px. Aside element treba da bude fiksiran i tu se javlja problem - umesto da se fiksira u odnosu na wrapper, on se fiksira u odnosu na body. To je okej, zato sto u CSS specu za position: fixed i pise: The value fixed generates an absolutely positioned box that’s positioned relative to the initial containing block (normally the viewport). Ali, ja zelim da se fiksira u odnosu na wrapper, zato sto jedino tako mogu biti siguran da ce aside biti na pravom mestu za bilo koju rezoluciju. Evo koda: ... Kôd: <body> <div id="wrapper"> <div id="content"> </div> <aside id="sidebar"> </aside> </div> </body> Kôd: #wrapper { position: relative; width: 900px; margin: 0 auto; } #content { width: 610px; float: left; } aside { position: absolute; top: 120px; left: 660px; width: 240px; height: 100%; } Kako biste vi resili ovakav problemcic? Poslednja izmena od m.stojanov : 05. 10. 2011. u 12:18.

05. 10. 2011.	#3
bluesman Goran Pilipović Sir Write-a-Lot Datum učlanjenja: 18.05.2005 Lokacija: Beograd Poruke: 5.450 Hvala: 288 1.247 "Hvala" u 446 poruka	Ako sam ja razumeo problematiku, što ne staviš lepo da je float: right? Što mora da bude fixed? Osim toga ali ti je #content već float:left, ovaj #aside i ne mora da buzde float, samo da ima margin-left:660px __________________ Goran Pilipović a.k.a. Ugly Fingers Bradley f.k.a. bluesman I don't always know what I'm talking about but I know I'm right!

05. 10. 2011.	#7
Br@nkoR banned Professional Datum učlanjenja: 04.06.2005 Poruke: 371 Hvala: 0 738 "Hvala" u 83 poruka	Dodaj css: Kôd: aside { height: 0; } __________________ Don't look at me; I'm lost too. “If you can't dazzle them with brilliance, baffle them with buls*t.”

06. 10. 2011.	#8
vukan novi član Na probnom radu Datum učlanjenja: 29.12.2005 Poruke: 21 Hvala: 1 2 "Hvala" u 2 poruka	Dovoljno je da (u kodu iz prvog posta) za sidebar stavis: Kôd: position: fixed; margin-left: 660px; top: 120px; i to je to. __________________ E Logo Design

05. 10. 2011.	#2
AdriaMart expert Expert Datum učlanjenja: 15.03.2011 Poruke: 518 Hvala: 16 20 "Hvala" u 17 poruka	Probaj da iskombinujes sa: position: fixed;