CSS positioning in bottom left with minimum margin from top

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

  •  11-07-2023
  •  | 
  •  

Pregunta

I am trying to keep an element at the bottom left of the page, but, if it is too close to the top of the page, it should just stay (so the user can still scroll down to see it).

I have tried:

.howitworks {
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 24px;
    margin-top: 500px;
}

I had hoped setting the margin-top would help, but it still allows the element to smash into the top of the page.

How can I achieve my desired behavior?

¿Fue útil?

Solución

Since you are positioning it absolutely, you could do something like this:

Give the body and html a minimum height, say 600px, and give them relative positioning:

html, body
{
    min-height: 600px;
    height: 100%;
    position: relative;
}

Then your element will always be at least 600px down the page, as long as the only relative parent it has is <body>.

JSFiddle

This works because you are now assigning the position relative to the page, rather than the browser window, so since the body height has to be at least 600px, the element will always be positioned at the bottom of the body element.

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