Forums

alextash

CSS


#wrapper {
		width: 500px;
		height: 500px;
		margin: 0 auto;
		background: yellow;
	}
	
#header {
		background: blue;
		position: absolute;
	}

HTML

<body>
	
	<div id="wrapper">
		<div id="header">
			<p class="p1">Paragraph 1</p>
			<p class="p2">Paragraph 2</p>
		</header>
	</div>
</body>

My first question is
1. Why my header is positioned relative to #wrapper, and not relative to page. I thought that if you dont specify any properties then positioning should be relative to the browser window with top:0; and left: 0;. Is it wrong? if yes, what is the correct answer?

2. why the width of my #header becomes as a width of paragraphs? Does absolutely positioned element lose its auto width?

timmey

hey alextash,

1) the #header needs a left-attribute, then you will see that its positioned to the browser window.

2) if you set position:absolute you need a width like wrapper has.

i made a jsfiddle, where you can see it and placed another div inside wrapper. just test a little bit and you will see how it works: http://jsfiddle.net/s9e9U/

and finally you can take a look at http://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/ if you havent already

alextash

Thank timmey, video podcast answered many of my question. Appreciate

wolfcry911

with an absolute positioned element, you don't need a width. The default auto width will 'shrink wrap' to its contents. In your case the contents are block level paragraphs that take up all available width, so the AP is full width as well.

Schmotty

absolute positioning will be relative to the first parent that has position set to anything other than static(default), which if not specified, is the browser window. But if you don't put a left, right, top, bottom for that child it will be rendered in place as if it were static.

alextash

Thanks very much wolfcry911 and Schmotty. This is what I really wanted to find out . Appreciate your help guys.

treehouse : what would you like to learn today?

Forums

need help again, please help!!!