Looking at the pic below, element B s relatively positioned and is shifted to the right by its top and left offsets leaving a gap that is honoured by A and C.
What would happen if element C was also set to position:relative, and it’s top and left offsets were set to nudge it upwards, would it be able to take the gap left by B?
Sure, but C’s original space would be preserved, like B’s. Generally position: absolute is better in this situation. Either way, it’s safest to do all this positioning in relation to a container, such as the div surrounding these elements. In practice, that means setting the container to position: relative.
Why would you say absolute positioning is better in this case?
Because then you are not leaving a gap behind when you move the element relative to where it belongs in the flow
I would say that no positioning is better in this case 
Unless you are dealing with never changing fixed height and width elements then you rarely want to use magic numbers to move elementd into position. Sometimes you have no choice but most times you want to keep elements in the flow and allowed to grow without breaking something else.
Relative position is also rarely used for structural layout but is more used for subtle changes (or overlapping effects) that do not affect the flow of the page.
Just to confirm you are only talking about absolute in this paragraph? As I understand you would not have to set height or width for e.g. a containing div of relative elements.
If you are trying to move a relatively placed element back up the page to fill a gap left by another element then you need to know the exact measurement to use which means that the element must be a fixed height and of course a fixed width if you want the width to fit in the space. If the user resizes the text or you add more content then that magic number will be wrong and content will no longer fit.
If you are dealing with fixed height and width elements such as images then you can move them in this way but preferably not with relative positioning because of the gaps that they will leave.
Your layout could be achieved without positioning at all but depending on the method used then source order of html would need to be manipulated.
One of the problems of answering questions based on ‘box diagrams’ is that seldom ever is real content a fixed box shape. What we need to diagnose and suggest best solutions is examples of real content or at least an idea of how the content is to be used in a real site.
These are two of the pages I am creating:
position:relative* inside Relative-div-A.img set to position:relative and a ‘7’ set to position:absolute.
position:relative inside the Relative-Container and will be given a higher z-index than the contents of Absolute-div-B so that it will be seen on top of the images.Is this the right approach?
This is a very simplistic example but I would do the first page with something along these lines.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
float:left;
background:#f9f9f9;/* this would be the image of the number 2 as a background image*/
}
.caption {
display:inline-block;
vertical-align:bottom;
padding:10px 25px 1px 10px;
background:red;
width:200px;
text-align:right;
}
.img-container {
position:relative;
z-index:1;
width:250px;
display:inline-block;
vertical-align:bottom;
margin:0 0 0 -25px;
}
.num {
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
text-align:center;
z-index:2;
font-size:300px;
color:#fff;
}
img {
display:block;
background:rgba(100,100,100,0.7);/* for testing*/
}
</style>
</head>
<body>
<div class="wrap">
<div class="caption">
<h3>Kurt Cobain</h3>
<p>Lorem ispsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum</p>
</div>
<div class="img-container"> <img src="kurt.jpg" width="250" height="350"> <span class="num">7</span> </div>
</div>
</body>
</html>
The only absolute element is the number and the rest does not need any positioning at all apart from creating the context for the absolute element.
You second design needs no positioning either and the first div would just be static and then the three images underneath could be floated across. It would just require a few margins to nudge everything into position.
There are probably a hundred other ways to do it but generally you want to avoid to much absolute positioning unless it is inside a controlled space.
Very interesting to see what you’ve done here, however:
position:absolute within the .caption-div or do you think the <h3> and <p> should be absolute instead?2)In the second design the transparent ‘27’ is also not a background image so I suppose that would need to be positioned:absolute. If that is the case, won’t the two divs need to be set to position:relative to allow for its overlap?
It would be helpful if you could post all of the components used in these renderings in a zip file or on a web site so we can download them. With the parts in hand, we can better recommend how they might be assembled.
Yes just place the 2 in the same way that the 7 was placed. There would be no need to adjust anything else except to add position:relative to the .caption element so that the 2 can be absolutely placed from within.
In the second example the 2 and 7 can be absolutely placed so that the existing content just sits on top as required. I assumed the whole thing was a background image which would be the simpler way to do it.
As I said there are many ways to do it but as always it depends on “what comes next” as there may be different choices you need to make depending on the situation.
Thanks Paul very helpful, made me see that perhaps I was slightly over complicating things.
However I have hit a road block.
The absolute positioned “2”, placed in the The copybox (set to relative) refuses to centre with top,bottom,left,right:0
Even more strangely, there seems to be some weird margin at the bottom of the copybook div. I thought it could be line height but when I set that to zero the “2” completely clips off. At a loss. Any help would be appreciated.
heres a codepen:
http://codepen.io/ComputerJuice/pen/RrPevR -pull up the preview window fully
Try adding line-height:100%; to the digit class.
The margin at the top is margin collapse on the h2s top margins. Add a 1px padding top and bottom to copybox to stop margins poking through. (not sure if this is what you meant though)
I’m talking about the vertical space that appears at the bottom of the div…I had tried line height 100% but that space remained. If you scroll to the bottom of the div you’ll see it.
That was to center the number (more or less).
I’m not sure I see where you mean? The space inside the bottom of colored the div is the 800px height you set.
If you mean outside the coloured div then you still have default margins on the html/body elements.
html,body{margin:0;padding:0}
Yes I mean the space that appears outside of the div (which i have colored purple for illustration purposes). I had already applied html,body{margin:0;padding:0} to my actual code but no luck. it seems this vertical space gets bigger as you increase font size of the ‘2’ see pics below:
font-size:5000%
font-size:5900%
Hi,
Ok , that’s just because the 2 is bigger than the space it sits in. If you add overflow:hidden to .digit then there will be no overflow to cause a scrollbar.
Just because the 2 is inside the absolute box it doesn’t mean that is is confined to it and if you go on increasing the size then it will no longer fit. Remember that letters and numbers are made up of leading and half-leading etc so that you have room for ascenders and descenders.
Your 5900px equates to 944px font-size which obviously won’t fit in a 800px tall div if you include the leading etc
Ohhhh I see!!!..I made the assumption that as it was set to absolute and was inside a relative container it would have no impact on anything else even if it did overflow.
