如何调整到绝对正确的位置＆＃34;在一个固定的标题？

Question

＆＃13;

＆＃13;

.header{
				position: fixed;
				width: 2000px;
				height: 70px;
				background-color: #ff509a;
			}
			
			.subTitle{
				width: 100px;
				line-height: 70px;
				float: right;
           margin-right: 20px;
				color: white;
				font-size: 50px;
			}
			
			.content{
				width: 2000px;
				height: 3000px;
			}

＆＃13;

<div class="header">
			<div class="subTitle">
				hello
			</div>
		</div>
		<div class="content">
			
		</div>

＆＃13;

＆＃13;

＆＃13;

这是代码。当我滚动到最右侧时，hello元素应出现在右侧。请帮忙！

Answer 1

只需添加

position: fixed;
right:0;

到.subTitle

完成工作！

Answer 2

将z-index:1;添加到.header，将position:absolute; z-index:2;left: 64%;/* or whatever spacing you want*/添加到.subTitle。不要忘记删除float，因为不再需要它。 Here is a pretty good article on z-index from MDN。所以CSS看起来像这样：

.header {
  position: fixed;
  width: 2000px;
  height: 70px;
  background-color: #ff509a;
  z-index: 1; 
}

.subTitle {
  width: 100px;
  line-height: 70px;
  /* float: right; */
  /* margin-right: 20px; */
  color: white;
  font-size: 50px;
  z-index: 2; /*z-index of 2 to overlay the .header element*/
  position: absolute; /*absolute positioning*/
  left: 64%; /*change this if needed*/
}