CODEWITHSUNDEEP
css
blake
blake

Reputation: 21

Why is my position:absolute <div> not positioned in relation to its parent?

I understand that if I wrap an outer div with a relative position around a div with an absolute position, then the absolute positioning of the inner div will be relative to the outer div (duh).

However when I do this:

<div class="outer">
  <div class="inner"> </div>
</div>

CSS:

 .outer {
 margin: 0 auto;
 padding: 20px;
 width: 700px; }

.inner {
position: absolute;
text-decoration: none;
cursor: pointer; 
bottom: 20px;
left: 5px;}

It makes the inner align with the browser window, not the relative div! I'm very stumped on this simple concept, I've been able to do this sort of thing before but I must be doing something wrong.

Here is the complete jsfiddle for you to see: http://jsfiddle.net/DDYUK/1/

Upvotes: 2

Views: 238

Answers (3)

Rituraj ratan
Rituraj ratan

Reputation: 10378

update css here fiddle demo

i update in your jsfiddle

use relative in outer div

.twitter-box {
  margin: 0 auto;
    position:relative;
  padding: 20px;
  width: 700px; }

  .twitter-box p {
    text-decoration: none;
    display: inline;
    position: absolute;
    margin-top: 69px; }

  .twitter-box img {
    height: 150px;
    width: 150px;
    text-align: center;
    margin: 0 auto; }

  .twit {
    position: absolute;
    text-decoration: none;
    cursor: pointer; 
    bottom: 20px;
    left: 5px;}

Upvotes: 0

robooneus
robooneus

Reputation: 1344

If you do not apply position:relative; to the .outer div, it will default to position:static. Absolutely positioned divs will be positioned relative to the closest parent that is positioned relatively. If there is none, it will be positioned relative to the page itself.

Upvotes: 1

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

.outer is never given the CSS property position:relative

.outer { 
    position: relative;
    margin: 0 auto; 
    padding: 20px; 
    width: 700px; 
}

Upvotes: 4

Related Questions