我有一些 html 元素：基本上是一个容器 div 和一个子 div。因此，当我为子 div 赋予 CSS 属性
left: 100%right: 0left: 100%.parent{
border: 1px solid #000;
height: 500px;
position: relative;
width: 500px;
}
.child{
background: #FF0;
height: 100px;
left: 100%;
position: absolute;
width: 100px;
}
这是正确的行为。如果在此设置中设置 left:100%，它将采用父级的宽度并将子级将该宽度的 100% 推到右侧，即 500px。正如已经提到的，您可以设置负边距宽度固定像素值，但我不推荐它。如果您有流体宽度布局怎么办？不会成功的。
有什么问题
right: 0否则，如果您仍想使用
left: 100%;transform: translateX(-100%)好吧，如果你有一个固定的，你可以用你的孩子的负边距来做到这一点：
.parent{
border: 1px solid #000;
height: 500px;
position: relative;
width: 500px;
}
.child{
background: #FF0;
height: 100px;
left: 100%;
position: absolute;
width: 100px;
margin-left: -100px;
}
您也可以使用浮动来做到这一点。我不知道你最终想要实现什么，但这也是你可以使用的：
.parent {
border: 1px solid #000;
height: 500px;
width: 500px;
}
.child {
background: #FF0;
height: 100px;
width: 100px;
float: right;
}<div class="parent">
<div class="child"></div>
</div>使用 left:100%，您可以使孩子的第一个边框停留在容器的末尾
如果您的目标是让黄色框向右对齐，这里您有选择：
.parent{
border: 1px solid #000;
height: 500px;
position: relative;
width: 500px;
}
.child{
background: #FF0;
height: 100px;
left: calc(100% - 100px);
position: absolute;
width: 100px;
}
.child{
background: #FF0;
height: 100px;
right: 0;
position: absolute;
width: 100px;
}
通过使用“left”属性，将元素的左顶点设置为 100%，因此它已相应地定位自己。
因此您可以使用 CALC() 将孩子的左角位置减少图像的大小
left: calc(100% - 100px)或者，像 Kilian So 评论的那样，使用“right”属性将右角设置为 0
right: 0<!-- IGNORE, SKIP TO RUN SNIPPET BELOW -->
<html>
<body>
<style>
* {
margin: 0;
padding: 0
}
div {
border: 1px solid black;
width: 100px;
height: 100px;
position: relative;
}
p {
margin-top: 20px
}
span {
border: 2px solid red;
position: absolute;
top: 0;
width: 50px;
height: 50px;
}
span#box1 {
left: 0;
}
span#box2 {
left: 100%
}
span#box3 {
left: calc(100% - 50px)
}
</style>
<p>Box 1 (Left: 0)</p>
<div>
<span id="box1"></span>
</div>
<p>Box 2 (Left: 100%)</p>
<div>
<span id="box2"></span>
</div>
<p>Box 3 (Left: 100% minus image size)</p>
<div>
<span id="box3"></span>
</div>
</body>
</html>