相对于父级 100% 宽度的绝对位置元素

Question

我正在尝试将元素绝对定位在设置为 position: relative 的父元素中，目前一切顺利。

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

我真正想要的是正确定位元素，使其与页面的包装对齐，其中包含 width:1140px。

如果我设置为fx的权利。 100px的absolute元素，在不同的分辨率下当然会有不同的结果。

有点难解释，所以我做了一个jsFiddle： https://jsfiddle.net/wxxezx0w/1/

.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;
}

<div class="navigation">
    <ul>
        <li>
            Home
        </li>
        <li>
            Page1
        </li>
        <li>
            Page2
        </li>
    </ul>
</div>
<div class="grandParent">
    <div class="parent">
        <div class="child">
            <h1>Hello world</h1>
            <div class="box">Align me right, relative to navigation div</div>
        </div>
    </div>
</div>

Answer 1

你已经设置

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

所以它在父级之外 div。

Answer 2

试试这个：

.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;
}

请注意，我已经更改了您 CSS 中的父母关系，添加了 >，这意味着第一个 child，例如：.child < .box {}

如果你在一个标签和另一个标签之间设置一个空格 CSS 意味着第一个包含第二个，在这种情况下是正确的，但也存在亲子关系。

这里是 jsfiddle：https://jsfiddle.net/wxxezx0w/2/

Answer 3

'box' 必须在 'child' 元素内吗？

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

.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;
    }
    #box_wrapper{
     width: 500px;
     margin: auto;
     position: relative;
     height: 100%;
    }
    .box {
     float: right;
     margin: auto;
     background: #fed;
     padding: 10px 25px;
     color: #000;
     font-size: 20px;
     z-index: 10;
     display: block;
     position: absolute;
     right: 0;
     bottom: 0;
    }

<div class="navigation">
 <ul>
  <li>
   Home
  </li>
  <li>
   Page1
  </li>
  <li>
   Page2
  </li>
 </ul>
</div>
<div class="grandParent">
 <div class="parent">
  <div class="child">
   <h1>Hello world</h1>
  </div>
  <div id="box_wrapper">
   <div class="box">Align me right, relative to navigation div</div>
  </div>
 </div>
</div>

Answer 4

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

我修改了.child .box并添加了一个right: 50%;和margin-right: -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;
}

这基本上做的是：

right: 50%; - 确保元素始终位于距屏幕右侧 50%。
margin-right: -250px; - 这是导航宽度的一半，因为导航是居中的，它将与 right: calc(50% - (half-width-of-nav)); 对齐，因此定位此元素的计算相同。

我希望这对你来说是可以理解的，如果不明白请告诉我，我会尽力详细说明。

此外 - 如果你可以使用 CSS calc() (compatibility table) 你可以删除负边距并只使用 right: calc(50% - 250px);

另请注意，如果您更改导航的宽度，您也必须更新它，因此它是有代价的，但是当您在视觉上更改您的设计时，您会发现它不再正确定位并且您所要做的就是修改值。

祝你好运！

Answer 5

对绝对定位元素使用 css 计算和固定宽度会有帮助。

.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: calc(50% - 250px);
    background: #fed;
    padding: 10px 25px;
    color: #000;
    font-size: 20px;
    z-index: 10;
    width:450px;
    text-align:center;
}

<div class="navigation">
    <ul>
        <li>
            Home
        </li>
        <li>
            Page1
        </li>
        <li>
            Page2
        </li>
    </ul>
</div>
<div class="grandParent">
    <div class="parent">
        <div class="child">
            <h1>Hello world</h1>
            <div class="box">Align me right, relative to navigation div</div>
        </div>
    </div>
</div>

相对于父级 100% 宽度的绝对位置元素

Position element absolute relative to 100% width parent

css

position

absolute