我没有能够让这个侧边栏正确定位,而不会让页脚重叠。
我的页脚绝对位于底部,用于粘性页脚,我知道它在绝对定位时会将其从文档的正常流中移除。
有人有想法吗?
<section class="sidebar col-md-6">
<!--Popular Posts-->
<!--TODO: Find a way to incorporate border design with text-->
<div class="border-header">
<p class="post-title">POPULAR POSTS</p>
<ul>
<li class="posts-border">My Adventure Through New York City</li>
<li>Hiking The Pacific Crest Trail</li>
<li>Explore the Breathtaking Antelope Canyon</li>
<li>Fujifilm X100T Review: Best New Camera in 2016</li>
<li>iPhone 6s Review: It Got Even Better</li>
</ul>
</div>
<!--Latest Reviews list -->
<!-- Categories List -->
<div class="border-header">
<p class="post-title">CATEGORIES</p>
<ul>
<li>Business <span>(4)</span></li>
<li>Reviews <span>(3)</span></li>
<li>Science <span>(4)</span></li>
<li>Technology <span>(4)</span></li>
<li>Travel <span>(6)</span></li>
</ul>
</div>
</section>
//Sidebar
.sidebar {
width: 500px;
min-height: 500px;
position: fixed;
right: 20px;
z-index: 1;
}
ul li {
list-style: none;
}
.posts-border {
border-bottom: 1px solid lightgray;
width: 90%;
}
.post-title {
margin: -10px auto 10px auto;
text-align: center;
}
.border-header {
border: 2px solid lightgray;
margin-bottom: 25px;
}
.spacer {
margin: 200px;
}