如何用粘性定位div？

Question

我需要通过滚动来固定位置，所以我使用position:sticky但我没有定位我放置的位置。我试过这个。Link

Answer 1

您需要使用fixed代替sticky。

position: fixed;
bottom: 0px;

Answer 2

<强> HTML

---

<div id="footer" >
        <p><a href="#">copywrite @PP 2014</a></p>
    </div>

<强> CSS

---

#footer {
    height:20px;
    width:100%;
    text-align:center;
    position:fixed;
    bottom:0px;
    left:0px;
    background-color: purple;
    z-index:60;
    vertical-align:text-top;
    padding-bottom:15px;
}
#footer p a {
    color: white;
    text-decoration: none;
    font: 12px Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-shadow:0px 1px 1px rgb(0, 0, 0);
    -webkit-text-shadow:0px 1px 1px rgb(0, 0, 0);
    -moz-text-shadow:0px 1px 1px rgb(0, 0, 0);
    -o-text-shadow:0px 1px 1px rgb(0, 0, 0);
    -ms-text-shadow:0px 1px 1px rgb(0, 0, 0);
}

<强>小提琴

---

DEMO

<强>输出：

---

<强>建议：

---

请勿使用<center>标记，不推荐使用。

  

此功能已从网络中删除。虽然有些浏览器可能   它仍然支持它，它正在被淘汰。不要使用它   在旧的或新的项目中。使用它的页面或Web应用程序可能会破坏   时间。

<强> Source

---

对 CSS 所做的更改

#footer {
    width:100%;
    position:fixed;
    bottom:0px;
   }

Answer 3

目前大多数浏览器都不支持

position: sticky。 请参阅此链接：http://caniuse.com/css-sticky

您可能希望在此之前使用position: fixed。

Answer 4

设置css

#footer{
   display:block;
   position:fixed:
   left:0;
   right:0;
   bottom:0  
}

Answer 5

你必须使用

position:absolute;

如果您尝试将第一个固定元素固定的div放在文档中。

否则你必须使用

position:fixed;

如果你想要div固定，即使你也滚动窗口，这是用浏览器修复的，这可以在设计弹出窗口时使用。 检查here