Question

我有两列布局，希望$host = "localhost"; // or, with a custom port $host = "localhost,12345"元素在右列水平居中。

我如何实现这一点，因为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;
}

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>

中心固定元素水平减去列

1 个答案: