CSS固定位置在主要中心内容的右侧

Question

我有一个带有margin:0 auto;的主要内容区域的网站，我需要将某些社交图标固定在主内容区域的右侧（例如left:100%，因此它位于主要内容之外内容区域，但附着在右侧）。

我不能使用绝对的方法，因为他们希望与页面卷轴始终在同一位置可见的按钮。我不能使用right:0，因为这将其放在浏览器窗口的右侧，而不是该主要内容区域的右侧。根据您的主要内容区域修复某些问题的最佳方法是什么？如果需要，我可以调整标记。

编辑：这是我现在的标记。

<div class="mainContentArea">
    <div class="socialIconsWrapper">
        <div class="socialIcons">

Answer 1

将其放入页脚部分的内容区域，然后使用左：100％;

Answer 2

您可以使用left: calc(50% + 480px)设置固定社交图标的位置。下面给出的示例：

.page {
  width: 100%;
}
.main {
  width: 320px;
  margin: 0 auto;
  position: relative;
  height: 800px;
  background-color: grey;
}
.social {
  width: 20px;
  height: 20px;
  position: fixed;
  left: calc(50% + 160px);
  background-color: red;
}

<div class="page">
  <div class="main">
    <div class="social">
    </div>
  </div>
</div>

Answer 3

使用flex。

.main {
  width: 980px;
  height: 100px;
  margin: 0 auto;
  display: flex;
  background: red;
  justify-content: flex-end;
}
.social-icons {
  align-self: flex-end;
}

<div class="main">
  <div class="social-icons">
    <img src="http://lorempixel.com/50/50/" alt="">
    <img src="http://lorempixel.com/50/50/" alt="">
    <img src="http://lorempixel.com/50/50/" alt="">
    <img src="http://lorempixel.com/50/50/" alt="">
  </div>
</div>

Answer 4

您可以尝试使用jquery在主内容区域之外计算正确的值。我将 $(window).resize()函数放在屏幕的每个大小中，都保留了社交图标包装器的权利的价值。

以下是我如何提出具有固定位置的社会图标的价值的步骤：
- 获取window width
-substract window width to main content width
- 从缩写的值除以2
- 在social icons wrapper width提取后
- 最后，您可以从主要内容区域获得社交图标包装器的价值

这是我的工作jsfiddle

$(document).ready(function(){
  $contrgt = $(window).width() - $('.mainContentArea').width();
  $socwd = $('.socialIconsWrapper').width();
 	$('.socialIconsWrapper').css('right', ($contrgt/2)-$socwd+'px');
    $(window).resize(function(){ 
     $contrgt = $(window).width() - $('.mainContentArea').width();
     $socwd = $('.socialIconsWrapper').width();
     $('.socialIconsWrapper').css('right', ($contrgt/2)-$socwd+'px');
    });
    
    console.log('right='+$contrgt+'px');   
});

*{ border-sizing: border-box; padding: 0; margin: 0; } /* used for global styling */
.mainContentArea{ max-width: 400px; margin: 20px auto; width: 100%; background: blue; color: #fff; }
.socialIconsWrapper{ background: red; position: fixed; z-index: 99; }
.socialIconsWrapper a{ color: #fff; }

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
    <div class="mainContentArea">
    <div class="socialIconsWrapper">
        <div class="socialIcons">
           <a href="">fb</a>
           <a href="">twitter</a>
           <a href="">youtube</a>
        </div>
    </div>
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
</div>