Buat elemen melekat pada bahagian atas dan tengah

Question

Saya mempunyai halaman yang melimpahi port pandangan secara mendatar dan menegak, dan saya mahu menampal navigasi supaya sentiasa berada di atas dan berpusat secara mendatar.

Kini saya boleh membuat bahagian atas melekit berfungsi, tetapi pemusatannya tidak. Ada sesiapa boleh tolong?

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

Tidak seperti kedudukan:melekat dan kedudukan menegak, left: 50%bukan pilihan kedudukan dinamik; ia hanya menetapkan kedudukan awal. Bar skrol mendatar masih menyebabkannya bergerak supaya ia kekal "50% dari tepi kiri".

Untuk mencapai kedudukan kiri dan kanan tetap, tambahkan margin dengan position:fixed 的标题容器，在其中，标题 div 可以获得 auto di sekeliling tajuk:

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

Selepas beberapa penggalian saya dapati ini:

Mengapa elemen saya tidak melekat di sebelah kiri apabila menggunakan kelekatan kedudukan dalam CSS?

Secara asasnya, ia tidak akan melekat kerana badan secara automatik akan mengembang sehingga lebar kotak yang sangat besar.

Meletakkannya ke dalam bekas blok sebaris akan menghalang lebar daripada mengembang secara automatik kepada kanak-kanak, membolehkan tingkah laku tampal.

Jadi ini berfungsi:

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