如何设置顶部固定位置的导航标题

Question

我将导航标题设置为页面顶部的固定位置。问题在于，存在滚动条时，右对齐的项目将部分隐藏。我如何防止这种情况发生？

我的代码

header {
  width: 100%;
  height: 150px;
  z-index: 1000;
  position: fixed;
  background-color: white;
}

<header class="mat-elevation-z1" fxLayout="row">
  <span style="flex: 1 1 auto;"></span>
  <div>Right Item</div>
</header>

这是上面的代码的显示方式。我希望当滚动条显示时正确显示正确的项目。没有滚动条时，它会完全显示。

Answer 1

这是使用padding和box-sizing: border-box完成此操作的一种方式。

header {
  width: 100%;
  height: 150px;
  z-index: 1000;
  position: fixed;
  background-color: white;
  
  /* Added the following lines */
  box-sizing: border-box;
  left: 0;
  top: 0;
  padding-right: 15px;
  padding-top: 15px;
  text-align: right;
}

<header class="mat-elevation-z1" fxLayout="row">
  <span style="flex: 1 1 auto;"></span>
  <div>Right Item</div>
</header>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure debitis corporis cum nemo ex, soluta hic ratione obcaecati corrupti quas quod, laborum itaque consequatur, sint enim voluptatum dolore aliquam eum. Doloribus perspiciatis non debitis cum cumque
  iste magnam architecto labore, veritatis fugit omnis eius maiores earum molestias aliquam facilis sint ea facere corrupti quae placeat deserunt incidunt eveniet ad! Aut. Itaque atque minus dignissimos nostrum earum modi, nemo error, placeat est quas
  deserunt ducimus magni. Facilis cumque aspernatur esse explicabo ea sit incidunt molestiae tempore? Laudantium molestiae qui obcaecati dignissimos?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure debitis corporis cum nemo ex, soluta hic ratione obcaecati corrupti quas quod, laborum itaque consequatur, sint enim voluptatum dolore aliquam eum. Doloribus perspiciatis non debitis cum cumque
  iste magnam architecto labore, veritatis fugit omnis eius maiores earum molestias aliquam facilis sint ea facere corrupti quae placeat deserunt incidunt eveniet ad! Aut. Itaque atque minus dignissimos nostrum earum modi, nemo error, placeat est quas
  deserunt ducimus magni. Facilis cumque aspernatur esse explicabo ea sit incidunt molestiae tempore? Laudantium molestiae qui obcaecati dignissimos?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure debitis corporis cum nemo ex, soluta hic ratione obcaecati corrupti quas quod, laborum itaque consequatur, sint enim voluptatum dolore aliquam eum. Doloribus perspiciatis non debitis cum cumque
  iste magnam architecto labore, veritatis fugit omnis eius maiores earum molestias aliquam facilis sint ea facere corrupti quae placeat deserunt incidunt eveniet ad! Aut. Itaque atque minus dignissimos nostrum earum modi, nemo error, placeat est quas
  deserunt ducimus magni. Facilis cumque aspernatur esse explicabo ea sit incidunt molestiae tempore? Laudantium molestiae qui obcaecati dignissimos?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure debitis corporis cum nemo ex, soluta hic ratione obcaecati corrupti quas quod, laborum itaque consequatur, sint enim voluptatum dolore aliquam eum. Doloribus perspiciatis non debitis cum cumque
  iste magnam architecto labore, veritatis fugit omnis eius maiores earum molestias aliquam facilis sint ea facere corrupti quae placeat deserunt incidunt eveniet ad! Aut. Itaque atque minus dignissimos nostrum earum modi, nemo error, placeat est quas
  deserunt ducimus magni. Facilis cumque aspernatur esse explicabo ea sit incidunt molestiae tempore? Laudantium molestiae qui obcaecati dignissimos?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure debitis corporis cum nemo ex, soluta hic ratione obcaecati corrupti quas quod, laborum itaque consequatur, sint enim voluptatum dolore aliquam eum. Doloribus perspiciatis non debitis cum cumque
  iste magnam architecto labore, veritatis fugit omnis eius maiores earum molestias aliquam facilis sint ea facere corrupti quae placeat deserunt incidunt eveniet ad! Aut. Itaque atque minus dignissimos nostrum earum modi, nemo error, placeat est quas
  deserunt ducimus magni. Facilis cumque aspernatur esse explicabo ea sit incidunt molestiae tempore? Laudantium molestiae qui obcaecati dignissimos?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure debitis corporis cum nemo ex, soluta hic ratione obcaecati corrupti quas quod, laborum itaque consequatur, sint enim voluptatum dolore aliquam eum. Doloribus perspiciatis non debitis cum cumque
  iste magnam architecto labore, veritatis fugit omnis eius maiores earum molestias aliquam facilis sint ea facere corrupti quae placeat deserunt incidunt eveniet ad! Aut. Itaque atque minus dignissimos nostrum earum modi, nemo error, placeat est quas
  deserunt ducimus magni. Facilis cumque aspernatur esse explicabo ea sit incidunt molestiae tempore? Laudantium molestiae qui obcaecati dignissimos?</p>