Home >Web Front-end >CSS Tutorial >Why is Position: sticky not working for my button in Internet Explorer 11?

Why is Position: sticky not working for my button in Internet Explorer 11?

Patricia Arquette
Patricia ArquetteOriginal
2024-12-01 16:15:15437browse

Position: sticky button fails in Internet Explorer 11

Problem:

I need to set the div containing the button to sticky so that The buttons in this div stay at the bottom of the page as the user scrolls. This way the user doesn't have to scroll all the way down to click the button.

The div containing the button is located here:

<div class="form-group sticky-button-thing-not-working-on-ie">
    <div class="col-md-offset-2 col-md-10">
        <input type="submit" value="Save" class="btn btn-default" />
    </div>
</div>

The CSS class is used to make it sticky in Firefox:

.sticky-button-thing-not-working-on-ie {
  position: sticky;
  bottom: 0;
  right: 0;
  background: rgba(0, 211, 211, 0.6);
}

Issue:
This code does not run properly in Internet Explorer 11. How do I get the same code to work in IE11?

Expected result:

Why is Position: sticky not working for my button in Internet Explorer 11?

Sample page: https://jsfiddle.net/thunderbolt36/a4yjfg13/

Answer:

sticky does not work in IE11, but luckily in this case , you can use fixed and it will work in both old and new browsers. You can also actually ignore sticky since it's not used as expected. The nice thing about sticky is that when you position it just below the top edge and then scroll down, it will move with the page until it reaches the top edge, then stop and stay there until you scroll up again.

.sticky-button-thing-not-working-on-ie {
  position: fixed;                        /* 添加此行以支持较旧的浏览器 */
  position: sticky;
  bottom: 0;
  right: 0;
  background: rgba(0, 211, 211, 0.6);
}

Note: Edge supports sticky

starting from version 16

The above is the detailed content of Why is Position: sticky not working for my button in Internet Explorer 11?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn