The art of CSS Absolute Positioning and the Science of Body Sc

Question

The art of CSS Absolute Positioning and the Science of Body Sc

I'm trying to position an absolute div in the bottom right corner of a page.

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

While this code works, I've noticed that when scrolling the page, the right/bottom position is relative to the visible window area rather than the entire body width/height.

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

To address this issue, one solution would be to add a wrapping div with styles position:relative, width: 100%;, but this may compromise the desired bottom positioning.

This is the final result I am striving for:

css css-position

Answer 1

Answer №1

To ensure your body element serves as the point of reference, declare a relative position for it:

body {
  position: relative;
}

This will make sure that your .absolute element is positioned relative to the body and not the viewport.

Answer 2

To ensure your body element serves as the point of reference, declare a relative position for it:

body {
  position: relative;
}

This will make sure that your .absolute element is positioned relative to the body and not the viewport.

Answer 3

Answer №2

http://example.com/1/

<body>
    <div class="blue"></div>
    <div class="green"></div>
</body>


<style type="text/css>
body {
  position: absolute;
  border:solid 5px yellow;
}
.blue {
    position:relative;
    height:600px;
    width:250px;
    border:solid 5px blue;
}
.green {
    position:absolute;
    bottom:10px;right:20px;
    width:300px;height:200px;
    border:solid 5px green;
}
</style>

and with lots of content in the "blue box" it looks like this: http://example.com/2/

Answer 4

http://example.com/1/

<body>
    <div class="blue"></div>
    <div class="green"></div>
</body>


<style type="text/css>
body {
  position: absolute;
  border:solid 5px yellow;
}
.blue {
    position:relative;
    height:600px;
    width:250px;
    border:solid 5px blue;
}
.green {
    position:absolute;
    bottom:10px;right:20px;
    width:300px;height:200px;
    border:solid 5px green;
}
</style>

and with lots of content in the "blue box" it looks like this: http://example.com/2/

The art of CSS Absolute Positioning and the Science of Body Sc

Answer №1

Answer №2

Similar questions

The dropdown on my website is malfunctioning

What is the best way to center an image within its div, especially when the image size may vary and could be larger or smaller than the div wrapper?

Menu options displayed with the help of HTML5 tags

Determine the outcome of the assessment quiz

Aligning items in several columns

Rows that intersect - Challenging to articulate - Bootstrap 3

Could you explain the distinction between push and offset within the grid system?

Footer button overrides list components due to improper implementation of vertical ion-scroll

Centered CSS Box with Pointing Arrow

Adding two BR tags between inline images within a wrapper is causing inconsistencies in spacing when viewed in Firefox compared to all other browsers. Check out an example of this issue in

Having trouble with looping the CSS background using JavaScript in CodePen

Reposition div when clicked

Optimizing CSS for Landscape Letter Print Alignment

Include an Open OnClick event in the React/JSX script

Assign a "margin-bottom" value of "0" to all elements in the final row of a responsive layout

CSS Vertical Accordion Menu

The component next/image is experiencing issues when used in conjunction with CSS

Tips on updating the arrow icon after clicking on a dropdown menu

Tips for customizing MUI PaperProps using styled components

Aligning text vertically to the top with material UI and the TextField component