CODEWITHSUNDEEP
csscss-position
Tobia
Tobia

Reputation: 9506

CSS Absolute positioning and body scrolling

I need to put an absolute div in the bottom right of a page.

.absolute{
   position: absolute;
   right:0;
   bottom: 0;
}

This works, but with page scroll the right/bottom position is not relative the body width/height but relative the visible area (window).

body{
    min-height: 600px;
    min-width: 600px;
}

I could solve this problem with a wrapping div of style position:relative, width: 100%; but I lost the bottom position.

This is what I want to get:

Page absolute positioning

Upvotes: 2

Views: 19584

Answers (2)

caramba
caramba

Reputation: 22480

http://jsfiddle.net/WCLwH/1/

<body>
    <div class="red"></div>
    <div class="lime"></div>
</body>


<style type="text/css">
body {
  position: relative;
  border:solid 5px blue;
}
.red {
    position:relative;
    height:500px;
    width:200px;
    border:solid 5px red;
}
.lime {
    position:absolute;
    bottom:0px;right:0px;
    width:250px;height:150px;
    border:solid 5px lime;
}
</style>

and with lots of content in the "red box" it looks like this: http://jsfiddle.net/WCLwH/2/

Upvotes: 2

pzin
pzin

Reputation: 4248

Just set a relative position to your body element:

body {
  position: relative;
}

Because so your .absolute element will be relative to it and not to the viewport.

Upvotes: 10

Related Questions