Kan javascript "förstöra" CSS-positionering?

Hej!
Jag har just lusläst http://alistapart.com/article/css-positioning-101 om positionering för jag vill så gärna förstå detta - eftersom jag åter har problem med sidan. Och med det som facit så har jag inte gjort något fel.

Innan jag la in en div med ett bildspelsskript i så såg sidan ut som den skulle, Header-div med en statisk bild i (100% vidd och bredd), därunder en navigationsbar med fast höjd men 100% vidd, därunder diven MainContent. Samtliga element (i stort sett) är angivna med % och inte fasta pixelvärden och alla mina div:ar på sidan har position= relative. Detta fungerade problemfritt ända tills jag bytte ut den statiska bilden i Header-diven mot ett javaskript-bildspel, och då plötsligt hamnar bildspelet ovanpå de andra divarna (dvs täcker över dem så att de inte syns. Anledningen till att jag vet att de är där är att då bilderna fade'ar så ser man de andra divarna med innehåll). Jag förstår inte hur det kan bli såhär? (särskilt då samma bildspel-skript fungerar utmärkt på en annan sida jag gjort.)

Här är lite pseudokod på problemområdet:
Div Container
Div Header
Div rotating-image-wrapper
roterande-bilder1.jpg klass=AbsolutPositioneradKlass
roterande-bilder2.jpg klass=AbsolutPositioneradKlass
roterande-bilder3.jpg klass=AbsolutPositioneradKlass
/div rotating-image-wrapper
/div Header
/div Container

Divarna Container, Header och Roterande-bildspel är relativt positionerade. Deras vidder är angivna i % och har Float:Left; de har även clear: both i samtliga div'ar i CSS:en.

Jag hoppas så att någon kan hjälpa mig för jag har suttit fast med detta i ett dygn nu....

Äsch, kan lika gärna lägga in koden på riktigt..

kanske är det något jag missat som är av betydelse.

CSS:en:

#header {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	padding-top:0px;
}
/* Rotating images */
#rotating-item-wrapper {
    position: relative;
	width:100%;
	height:100%;
  }  

.rotating-item {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}
/* End rotating images */

HTML:

  <div id="header">
  	<div id="rotating-item-wrapper">
	<img src="images/slideshow/bildspel1.jpg" class="rotating-item"  width="100%" />
      	<img src="images/slideshow/bildspel2.jpg" class="rotating-item"  width="100%" />
      	<img src="images/slideshow/bildspel3.jpg" class="rotating-item"  width="100%" />      	
        </div>
   </div><!--End header-->

Du saknar någon höjd i ditt element, absolut position flyttar bort elementet ifrån det lager där den skulle renderas ut så #header bli aldrig större än vad du har antingen angett eller har innehåll som trycker ner den.

JS har ju fritt spelrum att ändra vad det vill, inklusive CSS-attribut. Det vore högst relevant att se hur slideshow-skriptet ser ut också. Troligtvis pillar skriptet på attributet z-index för att lägga en bild på en annan.
Jag vet inte om de kommer funkar som fix, men prova att sätta att sätta z-index:-1; (eller annat negativt värde) i klasen rotating-item-wrapper. Och som sagt, koden tack!

Ah, så jag måste absolut-positionera header-diven? Eftersom den statiska bilden tryckte ut den till rätt storlek men det gör inte de rörliga bilderna?

I länken jag refererar till ovan så står det inget om denna bortflyttande förmåga :D Det hade hen missat att skriva. I ett exempel på sidan (exempel F) så lägger han absolut-positionerade orange'a kvadrater inut de element han jobbat med i tidigare exempel - och japp - de är absolut-positionerade de också. Men det nämns inget om det i texten. Kass. Så man kan alltså inte lägga absolut-pos. element inuti relativt-positionerade, eller, då upphör det relativt positionerade elementets koordinatsystem att fungera. Är det rätt uppfattat?
Nu ska jag testa att ändra i koden, hoppas-hoppas att det ska funka. Återkommer.

Javaskriptet förstår jag inte fullt ut, men till viss del. Jag använder det på en annan sida, och där fungerar det fint. Men nåväl, här är skriptet:

$(window).load(function() {	//start after HTML, images have loaded

	var InfiniteRotator = 
	{
		init: function()
		{
			//initial fade-in time (in milliseconds)
			var initialFadeIn = 1000;
			
			//interval between items (in milliseconds)
			var itemInterval = 5000;
			
			//cross-fade time (in milliseconds)
			var fadeTime = 2500;
			
			//count number of items
			var numberOfItems = $('.rotating-item').length;

			//set current item
			var currentItem = 0;

			//show first item
			$('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

			//loop through the items		
			var infiniteLoop = setInterval(function(){
				$('.rotating-item').eq(currentItem).fadeOut(fadeTime);

				if(currentItem == numberOfItems -1){
					currentItem = 0;
				}else{
					currentItem++;
				}
				$('.rotating-item').eq(currentItem).fadeIn(fadeTime);

			}, itemInterval);	
		}	
	};

	InfiniteRotator.init();
	
});

du behöver sätta höjjden på din #rotating-item-wrapper som är samma höjd som .rotating-item (den som bli synlig) något i denna stil:

$(window).load(function() {	//start after HTML, images have loaded

	var InfiniteRotator = {
		init: function() {
			//initial fade-in time (in milliseconds)
			var initialFadeIn = 1000;
			
			//interval between items (in milliseconds)
			var itemInterval = 5000;
			
			//cross-fade time (in milliseconds)
			var fadeTime = 2500;
			
			//count number of items
			var numberOfItems = $('.rotating-item').length;

			//set current item
			var currentItem = 0;

			//show first item
			var item = $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

			// Container
			var container = item.closest('#rotating-item-wrapper');

			container.height(item.height());

			//loop through the items		
			var infiniteLoop = setInterval(function(){
				$('.rotating-item').eq(currentItem).fadeOut(fadeTime);

				if(currentItem == numberOfItems -1){
					currentItem = 0;
				}else{
					currentItem++;
				}
				item = $('.rotating-item').eq(currentItem).fadeIn(fadeTime);
				container.height(item.height());
			}, itemInterval);
		}
	};
	InfiniteRotator.init();
});

kanske hjälper dig

Jag kanske är jättedum nu, kanske ser jag inte skogen för alla träd, men - måste jag ändra ALLA divar till absolute för att det ska fungera? Det är typ jättemånga. (ca 24-30 st, pga alla olika medieformat...)

Sen sa jag inte att den enda div'en som klarar sig är min navbar-ribbon; den med en bestämd höjd (40px) - den lägger sig ovanpå bildspelet, högst upp. Kan det vara så att innehållet i divarna måste ha fasta värden i pixlar, och inte %, för att det ska fungera?

Tack snälla för att ni hjälper mig!

Ska jag in och ändra i js? Men den fungerar ju som den är på min andra sida :( Jag är inte helt med på var jag ser någon fast höjd i js, kan du peka ut raden du ändrat på..?

Den enda skillnaden mellan den fungerande webbsidan och denna är att på den fungerande så har bildspelet vidd och höjd angivet i pixlar, och på denna sida är det 100%. Men jag vill inte ange fasta värden, då blir ju inte sidan skalbar (och det är ett krav att den ska vara det)...... Hur gör man då..?

Edit: Testade att ändra i CSS'en på wrappern till fasta värden, men det hjälpte inte. Diven envisas likförb*t att lägga sig ovanpå. gahhh

Du bör ju bara använda absolut positionering där det behövs....

Hur position fungera är att om du har default (static) så kommer den fylla ut den ytan som elementet tar i "lagret".

Position relative sätter ut sin yta där den borde vara som du kan "offset:ar" med top, left, bottom osv.

Position absolut "lyfter" ut hela boxen ifrån det aktuella lagret och inte ta fyller ut den ytan som den borde ha renderats ut på.

Jag tror det enklaste är att du skapar ett nytt projekt och leker runt med position och se hur resultatet ser ut innan du försöker lyfta in det i ett aktuellt projekt.

Jo jag har ju läst på ordentligt om positionering (han förklarar jättebra i länken jag la upp i första inlägget) och enligt den så har jag inte gjort något fel. Jag ser inte hur jag skulle göra annorlunda om jag gör om projektet igen (plus tidsbrist, måste bli klar idag med denna layout för att hinna med i min tidplan...)

Nu postar du förmodligen inte allt HTML eller CSS men:

#header {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	padding-top:0px;
}

div är ett block element, bredden behöver du inte, float behöver du inte heller, marginal och padding behöver du inte heller (om du inte ha något annat som skriver över det i någon annan CSS), kommer dock inte hjälpa dig med ditt problem då du måste sätta en höjd för att trycka ner boxen för den har ingen höjd

Tack för svar, ska se om jag kan rensa upp lite.

Hur som helst, så har jag kommit framåt LITE nu i alla fall, jag har förstått vad jag måste göra för att få det att funka.

1. Jag satte en höjd i pixlar på Header-diven
2. Ändrade tillbaks position till först relative och sen statisk (tog bort den helt)

Då först tog Header-diven sin plats och tryckte ner de nästföljande div:arna.
Problemet jag har nu som jag måste fundera på är hur jag ska lösa detta för att få det att funka så att det blir flytande; dvs det måste fungera i olika medieformat....
Det blir nästa huvudvärk.

Jag tror jag precis fann vad jag behövde här:
http://responsiveslides.com/

:D