我正在创建一个博客网站，其顶部显示最新的帖子，下面是显示所有博客帖子的部分。我有最近的帖子和另一个div，它将显示最受欢迎的帖子，社交图标等。我想要发生的是让侧边栏与最新帖子一起保持静态，并使最近的帖子可滚动。我的代码导致侧边栏完全消失。当我把这个部分与CSS一起调试时，一切都很完美。当我把它全部放回去时，侧边栏再次消失。
以下是相关的代码：
/* relevant css */
.wrapper {
position: relative;
width: 100%;
height: 100%;
margin: auto;
padding: 0;
}
.maincontent {
top: 0;
left: 0;
width: 80%;
height: 100%;
}
.sidebar {
position: fixed;
float: right;
/*top: 200px;*/
left: 80%;
width: 20%;
height: 100%;
z-index: 999;
padding: 5px;
}
/* =============================================================================
INDEX > RECENT POSTS
============================================================================= */
.description {
text-align: justify;
}
.items .item .category2 {
position: relative;
margin-top: -10px;
z-index: 2;
margin-bottom: 20px;
font: bold 18px/21px 'proxima_novasemibold';
}
.items .item .category2 a {
display: inline-block;
background: #B9B9C8;
text-transform: uppercase;
letter-spacing: 1px;
padding: 0 10px;
text-decoration: none;
}
.items .item .category2 a:hover {
color: #ffff00;
text-decoration: none;
}
.social li a:hover {
color: #FFFF00;
}
.social {
text-align: center;
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.socialheading {
font-weight: bold;
display: inline-block;
letter-spacing: -2px;
padding-right: 15px;
}
.social>li {
display: inline-block;
padding-right: 1px;
padding-left: 1px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!-- relevant HTML -->
<div class="wrapper">
<div class="w3-row-padding w3-container">
<div class="w3-content w3-col l9 maincontent">
<div class="w3-row-padding w3-panel" onclick="javascript:window.location.href=''">
<div class="items">
<div class="w3-col l5">
<div class="item">
<div class="image">
<a href="post.php?id=3&title=fightlikeagirl"><img src="http://via.placeholder.com/350x150" class="w3-image"></a>
</div>
<div class="category2">
<a href="#">WELLNESS</a>
</div>
</div>
</div>
<div class="w3-col l7">
<h3>TITLE</h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum sed arcu vel dignissim. Cras fermentum ullamcorper libero, non finibus ante rhoncus id. Nullam condimentum ornare neque, vitae vestibulum libero dignissim ut. Donec
aliquam justo pretium, tempor libero vulputate, ultrices arcu</p>
<p><a href="">read more</a></p>
</div>
</div>
</div>
<hr>
<div class="w3-row-padding w3-panel" onclick="javascript:window.location.href=''">
<div class="items">
<div class="w3-col l5">
<div class="item">
<div class="image">
<a href="post.php?id=3&title=fightlikeagirl"><img src="http://via.placeholder.com/350x150" class="w3-image"></a>
</div>
<div class="category2">
<a href="#">WELLNESS</a>
</div>
</div>
</div>
<div class="w3-col l7">
<h3>TITLE</h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum sed arcu vel dignissim. Cras fermentum ullamcorper libero, non finibus ante rhoncus id. Nullam condimentum ornare neque, vitae vestibulum libero dignissim ut. Donec
aliquam justo pretium, tempor libero vulputate, ultrices arcu</p>
<p><a href="">read more</a></p>
</div>
</div>
</div>
<hr>
</div>
<div class="w3-col l3 sidebar">
<ul class="social">
<p class="socialheading">KEEP IN TOUCH </p>
<li><a href="" target="_blank"><span class="fa fa-facebook" aria-hidden="true"></span></a></li>
<li><a href="" target="_blank"><span class="fa fa-instagram" aria-hidden="true"></span></a> </li>
<li><a href="" target="_blank"><span class="fa fa-twitter" aria-hidden="true"></span></a></li>
<li><a href="" target="_blank"><span class="fa fa-pinterest-p" aria-hidden="true"></span></a></li>
<li><a href="" target="_blank"><span class="fa fa-linkedin" aria-hidden="true"></span></a></li>
<li><a href="" target="_blank"><span class="fa fa-youtube-play" aria-hidden="true"></i></a></li>
</ul>
<hr>
<p class="socialheading">MOST POPULAR POSTS</p>
</div>
</div>
</div>
以下是放在一起但不起作用的所有内容的codepen。
答案 0 :(得分：1)
为sidebar试试这个CSS
如果定位固定，请使用right:0属性而不是left:80%
并使用bottom:0
CSS
.sidebar {
position: sticky;
float: right;
right: 0%;
width: 20%;
bottom: 0;
height: 50%;
z-index: 999;
padding: 5px;
top: 0;
}
风格相应。
希望这会有所帮助..
答案 1 :(得分：1)
发布示例以获得相同的
检查小提琴以更好地理解
<强> fiddle
body,
html {
height: 100%;
padding: 0;
margin: 0;
}
.box {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.one {
height: 300px;
flex: 1 0 70%;
background: tomato;
overflow: auto;
}
.two {
flex: 1 0 30%;
background: green;
}<div class="box">
<div class="one">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quis velit, maiores quibusdam, odit obcaecati, ab repellendus vero nobis, beatae fugiat! Perferendis nulla, nisi, voluptatum sequi quasi asperiores nam praesentium?<br><br> Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Ullam fugit deleniti eum numquam eos, quisquam ducimus earum, sequi ad itaque cum quibusdam. Odit laudantium placeat perspiciatis voluptates dignissimos nulla excepturi.
<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam fugit deleniti eum numquam eos, quisquam ducimus earum, sequi ad itaque cum quibusdam. Odit laudantium placeat perspiciatis voluptates dignissimos nulla excepturi.
<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam fugit deleniti eum numquam eos, quisquam ducimus earum, sequi ad itaque cum quibusdam. Odit laudantium placeat perspiciatis voluptates dignissimos nulla excepturi.
</div>
<div class="two">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum repellendus numquam eum debitis. Quas iure quos, in placeat illo laudantium dignissimos officiis temporibus quibusdam fugit voluptatibus dicta provident ab impedit.
</div>
</div>
答案 2 :(得分：0)
您需要将top添加到侧边栏（您已经有一个，但是您对其进行了评论），然后侧边栏就会固定，有顶部，左侧，右侧和底部（只需要两个值）您可以确定位置