Ensure that the image remains positioned at the bottom of the page

Question

Ensure that the image remains positioned at the bottom of the page

Although it may seem like a repetitive question, the answers I have come across are quite unbelievable. Why would multiple lines of code be needed for such a simple task? It just doesn't make sense.

I specifically want to ensure that the img is located at the very end of the page, not just at the bottom of the displayed screen - as I am currently experiencing this issue.

Here is the code that I'm using now:

#footerimg {
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index:-2;
}

I am looking for a solution where the image will only become visible once I scroll to the very bottom of the page.

It's baffling to think that there isn't a CSS option like bottom-page:0px.

EDIT: https://i.sstatic.net/pVnns.jpg

html css css-position

Answer 1

Answer №1

Discover the power of CSS transform property with the application of transform: translateY(100%).

Check out the demonstration below:

#footerimg {
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index:-2;
  transform: translateY(100%);
}

<img id="footerimg" src="http://placehold.it/200x200"/>

UPDATE:

Reviewing the image provided in the question, it seems that positioning is unnecessary - simply place the img as the last element in the HTML markup.

A potential solution could look like this:

.content {
  height: 120vh;
}
section {
  text-align: right;
}
img {
  vertical-align: top;
}

<section class="content"></section>
<section>
  <img id="footerimg" src="http://placehold.it/200x200" />
</section>

Answer 2

Discover the power of CSS transform property with the application of transform: translateY(100%).

Check out the demonstration below:

#footerimg {
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index:-2;
  transform: translateY(100%);
}

<img id="footerimg" src="http://placehold.it/200x200"/>

UPDATE:

Reviewing the image provided in the question, it seems that positioning is unnecessary - simply place the img as the last element in the HTML markup.

A potential solution could look like this:

.content {
  height: 120vh;
}
section {
  text-align: right;
}
img {
  vertical-align: top;
}

<section class="content"></section>
<section>
  <img id="footerimg" src="http://placehold.it/200x200" />
</section>

Answer 3

Answer №2

To create a new block formatting context, you should define a positioned relative block-level element at the end of the body. This will ensure that all absolute positioned elements inside it are placed relative to it.

Take a look at this code snippet example:

body {
  width: 100%;
}
.blk1 {
  display: block;
  width: 100%;
  height: 500px;
  background: orange;
}
.blk2{
  display: block;
  width: 100%;
  height: 300px;
  position: relative;
  background: #9c9;
}
img.btm {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0;
  transition: opacity 1s ease; 
}
.blk2:hover .btm {
  opacity: 1;
}

<div class="blk1">
</div>
<div class="blk2">
<img src="//placehold.it/100/100" class="btm">
</div>

Here is an alternative solution:

body {
  width: 100%;
  position: relative;
}
.blk1 {
  display: block;
  width: 100%;
  height:200vh;
  background: orange;
}
body:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background-image: url('//placehold.it/100/100');
}

<div class="blk1">
    </div>

To apply the above solution, simply add position: relative to the body CSS styles.

body {
  position: relative;
}

Then include body:after:

body:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  background-image: url('//placehold.it/100/100');
}

Answer 4

To create a new block formatting context, you should define a positioned relative block-level element at the end of the body. This will ensure that all absolute positioned elements inside it are placed relative to it.

Take a look at this code snippet example:

body {
  width: 100%;
}
.blk1 {
  display: block;
  width: 100%;
  height: 500px;
  background: orange;
}
.blk2{
  display: block;
  width: 100%;
  height: 300px;
  position: relative;
  background: #9c9;
}
img.btm {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0;
  transition: opacity 1s ease; 
}
.blk2:hover .btm {
  opacity: 1;
}

<div class="blk1">
</div>
<div class="blk2">
<img src="//placehold.it/100/100" class="btm">
</div>

Here is an alternative solution:

body {
  width: 100%;
  position: relative;
}
.blk1 {
  display: block;
  width: 100%;
  height:200vh;
  background: orange;
}
body:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background-image: url('//placehold.it/100/100');
}

<div class="blk1">
    </div>

To apply the above solution, simply add position: relative to the body CSS styles.

body {
  position: relative;
}

Then include body:after:

body:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  background-image: url('//placehold.it/100/100');
}

Answer 5

Answer №3

I find your question a bit confusing as you mentioned needing to scroll to the bottom of the page to see an image.

My suggestion is to simply place the image under the footer container. This way, when you reach the bottom of the page, the image will be right there. No need for any complex coding tricks, just a traditional approach.

Answer 6

I find your question a bit confusing as you mentioned needing to scroll to the bottom of the page to see an image.

My suggestion is to simply place the image under the footer container. This way, when you reach the bottom of the page, the image will be right there. No need for any complex coding tricks, just a traditional approach.

Ensure that the image remains positioned at the bottom of the page

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to implement a hover animation within another hover animation in WordPress?

The WebView in HTML5 does not support the navigator.online feature

Disabling Sidebars on Blog Articles Exclusively for Mobile Devices

How do you eliminate row highlighting on the <TableRow> component within Material-UI's <Table> using ReactJS?

Alignment within bootstrap using accordion

React Native CSS Triangles not functioning anymore

"Discover the process of utilizing jQuery to trigger an action when scrolling past a

Alter the color of the initially chosen option in the dropdown selection

Positioning a box at the bottom rather than at the top

Finding and removing a specific CSS pattern from a webpage that has been loaded

JavaScript Age confirmation Overlay

Creating a dynamic navbar in an ASP.NET website by populating it with data from a

Creating a Collage with Varied Image Sizes

Hierarchy in CSS: The battle between author and user styling

What is the best way to keep my bottom navigation bar attached to my top navigation bar?

What is the best way to efficiently pass a prop from a Parent styled component to its children's styled components, regardless of how deeply nested they are?

Execute the script when the document is fully loaded

Tips for showcasing cards in a horizontal inline layout

Performing a subtraction operation using HTML5 and JavaScript

The navigation menu collapses upon itself when resizing the browser window