css - 水平居中固定元素减列

Question

我有一个两列布局，并希望 fixed 元素在右列中水平居中。

我如何实现这一点，因为 fixed 元素的位置不是相对于它的父元素而是相对于文档？

注意:左列的宽度是已知的。右列的宽度为“全宽”。

我使用的是 fixed(而不是 absolute)，因为元素必须跟随滚动。

.wrapper {
  height: 200px; 
  display: flex; 
  background-color: green;}

.column {
  width: 300px; 
  background-color: pink;
}

.content {
  flex: 1; 
  background-color: green;
}

.fixed-element {
  position: fixed; 
  left: 50%;
  background-color: orange;
}

<div class='wrapper'>
  <div class='fixed-element'>Please center me in green area.</div>
  <div class='column'></div>
  <div class='content'></div>
</div>

Answer 1

您可以使用calc计算中心和transform固定元素定位的未知宽度。

请检查 browser compability for the calc在生产中使用它之前对你来说没问题。

这是我的解决方案

body {
margin: 0;
}
.wrapper {
  height: 200px; 
  display: flex; 
  background-color: green;
}
.column {
  width: 200px; 
  background-color: pink;
}

.content {
  flex: 1; 
  background-color: maroon;
}

.fixed-element {
z-index: 111;
  position: fixed;
  right: calc(50% - 205px); //can't explain that +5px :)
   -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  background-color: orange;
}

<div class='wrapper'>
  <div class='fixed-element'>Please center me</div>
  <div class='column'></div>
  <div class='content'></div>
</div>