Position element absolute relative to 100% width parent - css

Question

I'm trying to position a element absolute inside a parent which is set to position: relative, so far so good.
The issue is, that the parent is 100% width, and the absolute positioned element would then stick all the way to the right of the browser when right:0.
What I really want, is to position the element right, so it lines up with the wrapper of the page, which has width:1140px.
If I set the right to fx. 100px of the absolute element, it will of course have different outcomes on different resolutions.
A bit hard to explain, so I've made a 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

Try this:
.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;
}
Note that I've changed the parental relationship in your CSS adding > which means first child of, such as: .child < .box {}
If you set a whitespace between one tag and another in CSS means that the first one contains the second, and in this case is true, but also exist a parental relationship.
Here the jsfiddle: https://jsfiddle.net/wxxezx0w/2/

Answer 2

This fiddle shows what you want, even when resized it will stay in the correct position.
I modified .child .box and added a right: 50%; and 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;
}
What this basically does is:
right: 50%; - makes sure the element is always positioned 50% from the right side of the screen.
margin-right: -250px; - this is half of the width of your navigation, since your nav is centered it will be aligned the same as right: calc(50% - (half-width-of-nav)); so the same calculation is made for positioning this element.
I hope this is understandable to you, if not let me know and I'll try to elaborate.
Also - if you can use CSS calc() (compatibility table) you could remove the negative margin and just use right: calc(50% - 250px);
Also note that if you change the width of your nav you'll also have to update this too so it comes at a price but when you visually change your design you'll see that this is no longer positioned correctly and all you'll have to do is modify the value.
Good luck!

Answer 3

u have set
.child .box {
bottom: -10px;
}
so it is outside the parent div.

Answer 4

The 'box' has to be inside the 'child' element?
Otherwise you could make a wrapper with the same dimensions of the navigation, put inside the box and then position it on the bottom-right.
.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 5

Use css calc and fixed width for absolute positioned element that will help.
.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>