Lassen Sie die Elemente oben und in der Mitte kleben

Question

Ich habe eine Seite, die sowohl horizontal als auch vertikal über das Ansichtsfenster hinausragt, und ich möchte die Navigation so einfügen, dass sie immer oben und horizontal zentriert ist.

Jetzt kann ich die klebrige Oberseite zum Laufen bringen, aber die Zentrierung funktioniert nicht. Kann jemand helfen?

body {
  text-align: center;
}

#header {
  background-color: yellow;
  width: max-content;
  position: sticky;
  top: 0;
  left: 50%;
  translate: -50%
}

#container {
  background-color: black;
  color: white;
  width: 200vw;
  height: 200vh;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

<div id="header">
  I should always be at the top and centered
</div>
<div id="container">
  <span>
  I am extremely large and wide
  </span>
</div>

CodePen: https://codepen.io/hbchin/pen/bGjpQLJ

Answer 1

与position:粘性和垂直定位不同，left: 50%不是动态定位选项；它只是设置初始位置。水平滚动条仍然会导致它移动，因此它保持“距左边缘 50%”。

要实现固定的左右位置，请在标题周围添加一个带有 position:fixed 的标题容器，在其中，标题 div 可以获得 auto 边距：

body {
  text-align: center;
  max-width:100vw;
  overflow:scroll;
}

/*added*/
#headercontainer{
  position:fixed; 
  width:100vw;
  left:0;
  top:0;
}
#header {
  background-color: yellow;
  width: max-content;
  /*left: 50%;*/ /*Removed*/
  margin:auto;/*added*/
}

#container {
  background-color: black;
  color: white;
  width: 200vw;
  height: 200vh;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

 
    

    I should always be at the top and centered
    


  
  I am extremely large and wide
  

Answer 2

经过一番挖掘后，我发现了这个：

为什么在CSS中使用位置粘性时我的元素不粘在左边？

本质上，它不会粘住，因为主体会自动扩展到非常大的盒子的宽度。

将其放入内联块容器中将使宽度不会自动扩展到子级，从而允许粘贴行为。

所以这有效：

body {
    text-align: center;
}

#header {
    background-color: yellow;
    width: max-content;
    position: sticky;
    top: 0;
    left: 50%;
    translate: -50%
}

#container {
    background-color: black;
    color: white;
    width: 200vw;
    height: 200vh;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}

#whole-thing {
    display: inline-block;
}

    

        I should always be at the top and centered
    
    

        
            I am extremely large and wide