问题描述
我想在我的主要内容右侧和左侧的免费横向空间的水平中间中保留一个固定的横向广告框网页，响应式，即与屏幕大小无关。这应该适用于大屏幕，因为在小屏幕上没有问题。
您可以看到我的意思，如果您在website亚马逊广告框的左侧和右侧没有水平居中（在主要内容之外的空白区域），大屏幕。
解决方案可以是flexBox和属性“ justify-content：space-around;”，它应该可以完全满足我的要求。
但是我今天注意到，弹性框与“ 位置：固定” 不兼容：至少与我的目的不兼容。根据StackOverflow和Reddit关于“ flex and fixed”的主题，我做了很多尝试，将a）合并到父容器（body）中
display:flex; justify-content: space-around;
b）并在框中
position:fixed;
但是，如果我这样做，则该框位于窗口的中心（在主要内容的上方） ...我错了吗？
您是否知道是否有别于flex + position：fixed（也许是javascript / jquery？）的另一种方法，以便固定框在自由横向空间中既保持中间水平位置又保持“固定”位置？
谢谢！
解决方法
问题出在webkit-filter: grayscale(100%);标记中的规则filter: grayscale(100%);和body的位置。从body删除此it规则，然后将这些规则添加到html标记中，如下所示：
html {
webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
为更好地实现块居中，您需要在top: 45%;中设置规则#publatdx，在top: 45%;中设置规则#publatsx，如下所示：
#publatdx {
position: fixed;
top: 45%; /*add this it*/
right: 1%;
max-width: 120px;
margin-left: 2px;
text-align: left;
border-radius: 3px;
box-shadow: 0 0 7px white;
}
#publatsx {
position: fixed;
top: 45%; /*add this it*/
left: 1%;
width: 120px;
margin-left: 2px;
text-align: left;
border-radius: 3px;
box-shadow: 0 0 7px white;
}
正如@sergey kuznetsov在评论中所建议的，粘性是答案，所以我找到了解决方案
body {margin:0; display: flex; flex-direction: row; justify-content: space-around;}
#fixed,#fixedr {position: sticky; top: 10%; width: 120px; height: 400px; background: orange; color: white;}
#main {max-width: 900px; margin-left: 1%; margin-right: 1%; padding: 1%;}
请注意，重要的是添加a）侧框的 height 和b）中央框的 margin ，否则所有操作都可能出错。而且，正如@sergey kuznetsov在评论中非常有帮助地建议的那样，c）重要的是将divs 包装成为父对象，以避免如果直接将divs进行怪异的“跳舞” 在身体下。
p {text-align: justify;}
body {margin:0; display: flex; flex-direction: row; justify-content: space-around;}
#fixed,#fixedr {position: sticky; top: 10%; width: 120px; height: 100px; background: orange; color: white;}
#main {max-width: 900px; margin-left: 1%; margin-right: 1%; padding: 1%;}<div id="fixed">
<p>some content</p>
</div>
<div id="main">
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra,per inceptos himenaeos. </p>
<p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus,iaculis vel,suscipit quis,luctus non,massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus,ullamcorper vel,tincidunt sed,euismod in,nibh. </p>
<p>Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra,per inceptos himenaeos. Nam nec ante. Sed lacinia,urna non tincidunt mattis,tortor neque adipiscing diam,a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. </p>
<p>Integer euismod lacus luctus magna. Quisque cursus,metus vitae pharetra auctor,sem massa mattis sem,at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,viverra nec,blandit vel,egestas et,augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. </p>
<p>Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis,venenatis tristique,dignissim in,ultrices sit amet,augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus,commodo ac,facilisis ac,ultricies eu,pede. </p>
<p>Ut orci risus,accumsan porttitor,cursus quis,aliquet eget,justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit,fermentum non,convallis id,sagittis at,neque. Nullam mauris orci,aliquet et,iaculis et,viverra vitae,ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet,consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. </p>
<p>Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra,per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. </p>
<p>Lorem ipsum dolor sit amet,per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. </p>
</div>
<div id="fixedr">
<p>some content</p>
</div>