CODEWITHSUNDEEP
css
Interfaith
Interfaith

Reputation: 145

make image element fixed position and doesn't move on scroll

I am trying to make an image stick to left of the page like "Give Feedback" button in:

http://www.hotscripts.com/category/scripts/php/

I have the following HTML code ( i have other codes but just to show an example):

<img id="btn" class="btn" src="cl.png" height="161" width="34" alt="clear" />

and the following CSS:

#btn {
    display: block;
    position: fixed;
    left: 0;
    top: 54%;
    z-index: 100001;
    width: 34px;
    height: 168px;
    margin: -45px 0 0;
    padding: 0;
    cursor: pointer;
}

For some reason it's not producing the same effect when I scroll the page. Do I have to use another DIV and wrap the button?

Upvotes: 0

Views: 13839

Answers (2)

Haim
Haim

Reputation: 69

Another solution would be to use position 'sticky'.

You can see the code on the CodePen Here. or below:

.outer { 
  display: flex;
  height: 100vh;
  width: 100%;
}
.inner {
  height: 100px;
  width: 60px;
  position: sticky;
  top: 54px;
  left: 0;
}

<div class="outer style-one">
  <div class="inner style-two">
    <div class="style-three">
      <a href="#">Feedback</a>
    </div>
  </div>
<div>

Upvotes: 0

karancan
karancan

Reputation: 2162

Have you specified a DOCTYPE decalaration in your markup? This should work:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

Add this to the top of your document.

Upvotes: 2

Related Questions