Css 如何将文本定位在距离屏幕右边缘5%的位置？

我的HTML是这样的

 <div class="maindiv">
   <h1>Hello World</h1>
   <h1>Click Here</h1>
 </div>

---

我不知道为什么它不起作用。我已经将Parent's div设置为relative，并将second child设置为right's 5%，因此它应该比right低5%，但它仍然在左边

.maindiv{
职位：相对
}
.maindivh1:n个孩子（1）{
位置：绝对位置；
左：50%；
最高：50%；
}
.maindivh1:n个孩子（2）{
位置：绝对位置；
底部：0；
右：5%；
}

居中的
右对齐

将css的样式设置为：

.maindiv{
职位：相对
}
.maindivh1:n个孩子（1）{
位置：绝对位置；
左：50%；
最高：50%；
}
.maindivh1:n个孩子（2）{
位置：绝对位置；
底部：0；
右：5%；
}

居中的
右对齐

使用右边距，而不是仅使用右边距属性

.maindiv h1:nth-child(2) { margin-right: 5%; }

---

使用保证金权利，而不是仅使用权利属性

.maindiv h1:nth-child(2) { margin-right: 5%; }

---

关于

.maindiv

的规则仅定义

div

对其父元素的行为方式。它对

div

的子级没有影响

第二个

h1

上的规则无效，因为静态定位时会忽略

right

，如果与

relative

定位一起使用，则会将元素向左移动更多。您希望它不大于水平空间的100%，但仍受父对象边界的影响。这就是

position:absolute

的作用。为了使其相对于父对象，父对象需要其

相对值

，而不需要任何其他设置（或任何非静态设置）

如果您希望它们处于相同的高度，我建议使用

位置：绝对值
的
float
或
top:0


您可能想要的是：


.maindiv{
/*仅供儿童定位参考*/
位置：相对位置；
}
.maindiv>h1{
/*您不希望利润率影响此处的定位*/
保证金：0；
}
.maindivh1:n个孩子（1）{
文本对齐：居中；
}
.maindivh1:n个孩子（2）{
位置：绝对位置；
右：5%；
排名：0；
}

福
酒吧
您对
.maindiv
的规则仅定义该
div
对其父元素的行为方式。它对
div
的子级没有影响

第二个
h1
上的规则无效，因为静态定位时会忽略
right
，如果与
relative
定位一起使用，则会将元素向左移动更多。您希望它不大于水平空间的100%，但仍受父对象边界的影响。这就是
position:absolute
的作用。为了使其相对于父对象，父对象需要其
相对值
，而不需要任何其他设置（或任何非静态设置）

如果您希望它们处于相同的高度，我建议使用
位置：绝对值
的
float
或
top:0


您可能想要的是：


.maindiv{
/*仅供儿童定位参考*/
位置：相对位置；
}
.maindiv>h1{
/*您不希望利润率影响此处的定位*/
保证金：0；
}
.maindivh1:n个孩子（1）{
文本对齐：居中；
}
.maindivh1:n个孩子（2）{
位置：绝对位置；
右：5%；
排名：0；
}

福
酒吧
当使用
右侧
、
左侧
、
顶部
和
底部
定位元素时，想象元素被推到您指定的方向。i、 e.
右侧：5%会将元素5%向右推

在这种情况下，您只需首先将
.maindiv
对齐到
text align:right
。像这样：


.maindiv{
位置：相对位置；
宽度：100%；
文本对齐：右对齐；
}
.maindivh1:n个孩子（1）{
文本对齐：居中；
}
.maindivh1:n个孩子（2）{
位置：相对位置；
右：5%；
}

居中的
右对齐
当使用
右侧
、
左侧
、
顶部
和
底部
定位元素时，想象元素被推到您指定的方向。i、 e.
右侧：5%会将元素5%向右推

在这种情况下，您只需首先将
.maindiv
对齐到
text align:right
。像这样：


.maindiv{
位置：相对位置；
宽度：100%；
文本对齐：右对齐；
}
.maindivh1:n个孩子（1）{
文本对齐：居中；
}
.maindivh1:n个孩子（2）{
位置：相对位置；
右：5%；
}

居中的
右对齐
在一个html页面中使用多个
标记是不好的。因此，我将单击此处更改为
在一个html页面中使用多个
标记是不好的。因此，我将单击此处更改为

否，
位置：相对和<代码>右侧：5%必须位于同一元素上，才能使<代码>权限
生效。请使用边距权限，而不是仅使用权限属性。maindiv h1:n子元素（2）{margin right:5%；}@Xufox相对定位将导致元素向左移动，即相对于自身，而不是相对于其父元素。否，
位置：相对和<代码>右侧：5%必须位于同一元素上，才能使<代码>权限
生效。请使用边距权限，而不是仅使用权限属性。maindiv h1:n子元素（2）{margin right:5%；}@Xufox相对定位将导致元素向左移动，即相对于自身，而不是相对于其父元素。为什么
top:50%
和
bottom:0
？另外，
left:50%
不会移动元素的左侧而不是其中心吗？我不太擅长css。但据我所知，如果你使用左50%，它将使元素中心，无论它是什么标签。我用了前50%，因为我认为他想水平居中