CSS Absolute positioning and body scrolling

StackOverflow https://stackoverflow.com/questions/23513501

  •  16-07-2023
  •  | 
  •  

Pregunta

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

¿Fue útil?

Solución

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.

Otros consejos

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/

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top