位置元素绝对相对于100％宽度父

Question

我正在尝试将一个元素绝对放置在父级中，该父级设置为position：relative，到目前为止一直很好。

问题是，父级是100％宽度，绝对定位元素会在右边一直粘到浏览器右侧：0。

我真正想要的是将元素放置正确，因此它与页面的包装器对齐，其宽度为：1140px。

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

有点难以解释，所以我做了一个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

试试这个：

.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 < .box {}

如果在CSS中设置一个标记与另一个标记之间的空格，则意味着第一个标记包含第二个标记，在这种情况下为真，但也存在父母关系。

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

Answer 2

你已经设定了

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

所以它在父div之外。

Answer 3

＆＃39;＆＃39;＆＃39;必须在孩子的内心。元件？

否则你可以制作一个与导航尺寸相同的包装纸，放在包装盒内，然后将其放在右下方。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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 calc和固定宽度作为绝对定位元素，这将有所帮助。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;