8 Replies - 762 Views - Last Post: 26 August 2013 - 04:29 PM

#1 apathybear7  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 35
  • Joined: 19-June 13

Absolute Positioning within a Div

Posted 26 August 2013 - 02:17 PM

So far, when one uses the left, right, top, and bottom properties to specify
the position, these numbers have always been with respect to the edge of the page,
that is unless you nest a div within a div (correct me if I am wrong), then the nested div's 'top' and 'right' values will be positioned in relation to the div it is nested in.

So when I have some html like this:

<div id="allcontent">
		
	<div id="star"><img src="images/star.gif"></div>

</div>


And some CSS like this:

#allcontent {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	
}

#star {
	position: absolute;
	top: 0;
	right: 0;


The star image should be placed in relation to the #allcontent div. So it should be placed "absolutely" on the top right of the #allcontent div. It is not doing this at the moment, rather it is placed absolutely in relation to the entire window still.

What am I doing wrong?

This post has been edited by andrewsw: 26 August 2013 - 02:25 PM
Reason for edit:: Removed whitespace


Is This A Good Question/Topic? 0
  • +

Replies To: Absolute Positioning within a Div

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3248
  • View blog
  • Posts: 10,892
  • Joined: 12-December 12

Re: Absolute Positioning within a Div

Posted 26 August 2013 - 02:27 PM

Absolute positioning is with respect to the elements nearest-parent positioned element. That is, the nearest-parent with any position other than static. Give 'allcontent'

position: relative;


http://www.impressiv...e-position-css/

This post has been edited by andrewsw: 26 August 2013 - 02:33 PM

Was This Post Helpful? 1
  • +
  • -

#3 apathybear7  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 35
  • Joined: 19-June 13

Re: Absolute Positioning within a Div

Posted 26 August 2013 - 02:39 PM

Interesting, the book I was reading never mentioned that.So must I always specify a div as 'relative' position if I want to position something absolute within it?

Thanks for helping a complete noob!

I replied before you edited your post. Thank you I got it.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3248
  • View blog
  • Posts: 10,892
  • Joined: 12-December 12

Re: Absolute Positioning within a Div

Posted 26 August 2013 - 03:08 PM

Relative positioning is most often used to provide the positioning-context for absolutely positioned elements, but it can be fixed, absolute , or inherit (if the parent to this element is positioned).

View Postapathybear7, on 26 August 2013 - 09:39 PM, said:

Interesting, the book I was reading never mentioned that.

Which book is that?
Was This Post Helpful? 0
  • +
  • -

#5 apathybear7  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 35
  • Joined: 19-June 13

Re: Absolute Positioning within a Div

Posted 26 August 2013 - 03:25 PM

What if I wanted to place a absolutely positioned div within another absolutely positioned div? The positioning context is not 'static', it should work right?

Also, what if I wanted to ignore the div that was closest to the div? Say something like this
HTML
<div id="galaxy">
     <div id="moon">
          
           <div id=star> blahblah </div>

     </div>
</div>



CSS
#galaxy {position: relative;}
#moon {position: relative;}
#star {position: absolute;}



How could I ignore the #moon div and instead position the #star div in relation to the #galaxy div? Would I have to re-organize my information?

I am reading O'rielly Head First HTML and CSS.

http://www.headfirst...m/books/hfhtml/
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3248
  • View blog
  • Posts: 10,892
  • Joined: 12-December 12

Re: Absolute Positioning within a Div

Posted 26 August 2013 - 03:41 PM

Quote

it should work right?

Yes. Do something experimenting.

Q2. Just delete this rule:

#moon {position: relative;}

But if you do this then there is no reason for #star to be contained in #moon (in the document order) and it could me moved before (outside of) it.

Quote

I am reading O'rielly Head First HTML and CSS.

Erm, I would be shocked and fall off my chair if this book didn't explain absolute-positioning and its context. My positioning-context would change from that of the chair to that of the floor.

This post has been edited by andrewsw: 26 August 2013 - 03:44 PM

Was This Post Helpful? 1
  • +
  • -

#7 apathybear7  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 35
  • Joined: 19-June 13

Re: Absolute Positioning within a Div

Posted 26 August 2013 - 04:01 PM

Quote

Quote

I am reading O'rielly Head First HTML and CSS.

Erm, I would be shocked and fall off my chair if this book didn't explain absolute-positioning and its context. My positioning-context would change from that of the chair to that of the floor.

Hahaha.
I am almost done with the chapter that discusses layout and positioning and I have not had any mention of context. Not to mention we are off the subject of absolute postiioning. In their excersises they made it seem like it would work without any rule like "position: relative" setting the context. I got so frustrated and that is the reason I posted on here! Other than that this book does a GREAT job of explaining the concepts of HTML and CSS. I am almost done with it and may move on to http://www.headfirst...ks/hfhtml5prog/. It includes javascript which I ultimately want to integrate into my coding. If you have any other suggestions for books I would love to hear them.

This post has been edited by andrewsw: 26 August 2013 - 04:04 PM

Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3248
  • View blog
  • Posts: 10,892
  • Joined: 12-December 12

Re: Absolute Positioning within a Div

Posted 26 August 2013 - 04:19 PM

Those books are good I believe. They have a distinctive presentational-style but if you are happy with this style then you might proceed to the second book - once you've completed the first!

The best book on Javascript remains Javascript: The Definitive Guide by David Flanagan, but it is not a light read, or a beginner's tutorial.

Good luck.
Was This Post Helpful? 0
  • +
  • -

#9 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3248
  • View blog
  • Posts: 10,892
  • Joined: 12-December 12

Re: Absolute Positioning within a Div

Posted 26 August 2013 - 04:29 PM

A Million Random Digits with 100, 000 Normal Deviates by Michael D. Rich is a good book. It starts slow but gets better towards the end :bigsmile:

Quote

This book of random numbers might be very good for the younger generation with their hip hop music. Call me old fashioned but I prefer my numbers to be in a traditional sequential order

This post has been edited by andrewsw: 26 August 2013 - 04:30 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1