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

Avoid having individual words centered on a single line of text

Calculating square roots in AngularJS

Determining the position coordinates of an element in relation to the viewport using JavaScript, regardless of its relative positioning

"Creating a link to a button with the type of 'submit' in HTML - a step-by-step

What is the best approach to display a fluctuating price depending on specific options chosen in Next.js?

IE and Chrome are experiencing issues where the radio buttons are disappearing

Building adaptable divs using bootstrap technology

Using CSS to create a color combination of black with varying opacities

The function toggleClass() is malfunctioning

Commencing CSS Animation Post Full Page Loading

CSS Flexbox - Choose all elements that appear at the start of a new line (Wrap)

Denied rendering of design due to incompatible MIME type

What is the best way to modify CSS animation property without causing any disruptions?

Fully responsive header designed for optimal experience at any screen height

Problem with displaying JSF Bootstrap Glyphicons

Add hyphens to separate the words in AngularJS if there is a break in the string

Receiving inaccurate video duration when the input bar is modified

How to display text on a new line using HTML and CSS?

Placing an element in a fixed position behind a non-fixed element

Having trouble getting this JavaScript query to function properly