Css 相对于100%宽度父元素定位元素绝对值

我试图在父元素中定位一个元素绝对值，该元素设置为position:relative，目前为止还不错

问题是，父元素的宽度为100%，当right:0时，绝对定位元素将一直粘贴到浏览器的右侧

我真正想要的是，将元素定位在正确的位置，使其与页面的包装器对齐，其宽度为：1140px

如果我将右侧设置为fx。100px的绝对元素，当然在不同的分辨率下会有不同的结果

有点难以解释，所以我做了一个JSFIDLE：

.navigation{
宽度：500px；
背景：#def；
保证金：0自动；
文本对齐：居中；
填充：5px0；
边缘底部：10px；
}
.导航ul{
列表样式类型：无；
填充：0；
}
李国宝先生{
显示：内联；
右边填充：20px；
}
.祖父母{
位置：相对位置；
宽度：100%；
}
.家长{
背景：url（'http://dummyimage.com/1800x1200/ccc/ccc不重复0.20%；
背景尺寸：封面；
高度：300px；
}
.儿童h1{
位置：绝对位置；
最高：25%；
左：25%；
颜色：#fff；
字体大小：60px；
字体大小：粗体；
宽度：50%；
文本对齐：居中；
}
.儿童箱{
位置：绝对位置；
底部：-10px；
右：0；
背景：#美联储；
填充：10px 25px；
颜色：#000；
字体大小：20px；
z指数：10；
显示：块；
}

家


第1页


第2页


你好，世界
相对于导航div向右对齐我

u已设置

 .child .box { 
   bottom: -10px;
}

因此它在父分区之外。

请尝试以下操作：

.navigation {
    width:500px;
    background:#def;
    margin:0 auto;
    text-align:center;
    padding:5px 0;
    margin-bottom:10px;
}
.navigation ul {
    list-style-type:none;
    padding:0;
}
.navigation ul li {
    display:inline;
    padding-right:20px;
}
.grandParent {
    position:relative;
    width:100%;
}
.parent {
    background: url('http://dummyimage.com/1800x1200/ccc/ccc') no-repeat 0 20%;
    background-size:cover;
    height:300px;
}
.child h1 {
    position: absolute;
    top: 25%;
    left: 25%;
    color: #fff;
    font-size: 60px;
    font-weight: bold;
    width: 50%;
    text-align: center;
}
.child < .box {
    position: absolute;
    bottom: -10px;
    right: 0;
    background: #fed;
    padding: 10px 25px;
    color: #000;
    font-size: 20px;
    z-index: 10;
    display: block;
}

.navigation{
宽度：500px；
背景：#def；
保证金：0自动；
文本对齐：居中；
填充：5px0；
边缘底部：10px；
}
.导航ul{
列表样式类型：无；
填充：0；
}
李国宝先生{
显示：内联；
右边填充：20px；
}
.祖父母{
位置：相对位置；
宽度：100%；
}
.家长{
背景：url（'http://dummyimage.com/1800x1200/ccc/ccc不重复0.20%；
背景尺寸：封面；
高度：300px；
}
.儿童h1{
位置：绝对位置；
最高：25%；
左：25%；
颜色：#fff；
字体大小：60px；
字体大小：粗体；
宽度：50%；
文本对齐：居中；
}
.child<.box{
位置：绝对位置；
底部：-10px；
右：0；
背景：#美联储；
填充：10px 25px；
颜色：#000；
字体大小：20px；
z指数：10；
显示：块；
}

请注意，我已在CSS中更改了家长关系，添加了

，这意味着的第一个孩子，例如：.

child<.box{}

如果在CSS中的一个标记和另一个标记之间设置空白，则表示第一个标记包含第二个标记，在本例中为true，但也存在家长关系

---

这里的jsfiddle:

框必须在“child”元素中

否则，您可以制作一个具有相同导航尺寸的包装器，放入框中，然后将其放置在右下角

.navigation{
宽度：500px；
背景：#def；
保证金：0自动；
文本对齐：居中；
填充：5px0；
边缘底部：10px；
}
.导航ul{
列表样式类型：无；
填充：0；
}
李国宝先生{
显示：内联；
右边填充：20px；
}
.祖父母{
位置：相对位置；
宽度：100%；
}
.家长{
背景：url（'http://dummyimage.com/1800x1200/ccc/ccc不重复0.20%；
背景尺寸：封面；
高度：300px；
}
.儿童h1{
位置：绝对位置；
最高：25%；
左：25%；
颜色：#fff；
字体大小：60px；
字体大小：粗体；
宽度：50%；
文本对齐：居中；
}
#包装盒{
宽度：500px；
保证金：自动；
位置：相对位置；
身高：100%；
}
.盒子{
浮动：对；
保证金：自动；
背景：#美联储；
填充：10px 25px；
颜色：#000；
字体大小：20px；
z指数：10；
显示：块；
位置：绝对位置；
右：0；
底部：0；
}

家


第1页


第2页


你好，世界
相对于导航div向右对齐我

这会显示您想要的内容，即使调整大小，它也会保持在正确的位置

我修改了

.child.box

并添加了

右侧：50%和
右边距：-250px

.child .box {
    position: absolute;
    bottom: -10px;
    right: 50%;
    margin-right: -250px;
    background: #fed;
    padding: 10px 25px;
    color: #000;
    font-size: 20px;
    z-index: 10;
    display: block;
}

这基本上是：


右侧：50%-确保元素始终位于屏幕右侧的
50%

右边距：-250px-这是导航宽度的一半，因为导航是居中的，所以它将与
右侧：calc（50%-（导航宽度的一半））对齐
因此对定位此元素进行相同的计算


我希望这对你来说是可以理解的，如果你不让我知道的话，我会尽力详细说明

另外，如果你可以使用CSS（），你可以去掉负边距，只需使用
right:calc（50%-250px）

还要注意的是，如果你改变了导航的宽度，你也必须更新它，所以它是有价格的，但是当你在视觉上改变你的设计时，你会发现它不再正确定位，你所要做的就是修改它的值

祝你好运
 对绝对定位元素使用css计算和固定宽度将有所帮助


.navigation{
宽度：500px；
背景：#def；
保证金：0自动；
文本对齐：居中；
填充：5px0；
边缘底部：10px；
}
.导航ul{
列表样式类型：无；
填充：0；
}
李国宝先生{
显示：内联；
右边填充：20px；
}
.祖父母{
假定