-1

I have been trying to determine the best way (correct method) to position divs within each other correctly. I can achieve my results either of two ways:

  1. Parent and Children Div = Position Relative
  2. Parent Div = Relative and Children Div = Absolute

Given the results are the same, is one method preferred over the other and if so, why? Perhaps, there are things I am not taking into consideration that I should and that is why I am raising this question.

I have pasted my code here for reference, so you can see what I doing. Within the CSS for div1-1 and div1-2 I have commented out the position relative code, but if you un-comment that and comment the position absolute part you will see what I am referring to.

http://jsfiddle.net/kxfn7bsj/

* {
  margin: 0px;
  padding: 0px;
}
.parent-container {
  background-color: cyan;
  height: 500px;
}
.child-container {
  background-color: black;
  color: white;
  border: 5px solid white;
  height: 200px;
  position: relative;
  top: 10%;
  left: 10%;
  width: 80%;
}
.div1 {
  background-color: green;
  color: white;
  position: relative;
  float: left;
  width: 30%;
  margin-right: 10px;
  height: 200px;
}
.div1-1 {
  background-color: blue;
  color: white;
  width: 60px;
  height: 100px;
  position: absolute;
  /*position: relative;
	float: left;*/
  left: 10px;
}
.div1-2 {
  background-color: orange;
  color: white;
  width: 60px;
  height: 100px;
  position: absolute;
  /*position: relative;
	float: left;*/
  left: 80px;
}
.div2 {
  background-color: brown;
  color: white;
  position: relative;
  float: left;
  width: 10%;
  margin-right: 10px;
}
.div3 {
  background-color: orange;
  color: white;
  position: relative;
  float: left;
  width: 10%;
  margin-right: 10px;
}
.div4 {
  background-color: red;
  color: white;
  position: relative;
  float: left;
  width: 10%;
  margin-right: 10px;
}
.div5 {
  background-color: blue;
  color: white;
  position: relative;
  float: left;
  width: 10%;
  margin-right: 10px;
}
.abs-div6 {
  background-color: pink;
  color: black;
  position: absolute;
  width: 15%;
  top: 30%;
  left: 40%;
}
<div class="parent-container">
  <div class="child-container">
    <div class="div1">
      <p>div1</p>
      <div class="div1-1">
        <p>div1-1</p>
      </div>
      <div class="div1-2">
        <p>div1-2</p>
      </div>
    </div>
    <div class="div2">
      <p>div2</p>
    </div>
    <div class="div3">
      <p>div3</p>
    </div>
    <div class="div4">
      <p>div4</p>
    </div>
    <div class="div5">
      <p>div5</p>
    </div>
    <div class="abs-div6">
      <p>abs-div6</p>
    </div>
  </div>
</div>

4
  • 2
    they are not the same, absolute positioned elements are taken out of the normal flow of the page.
    – JFK
    Jan 2, 2015 at 20:01
  • It's hard to determine exactly what your intention is here. The best way to position elements first is to consider do they need to be "in the flow" or "out of the flow" of the document. Absolute positioning takes the elements "out of the flow" and are used for things like layering one element over another, etc. Could you give more info about what you want the layout to look like? Jan 2, 2015 at 20:01
  • 1
    Yes, while relative inside relative and absolute inside relative produce same results, it does not mean relative = absolute.
    – Salman A
    Jan 2, 2015 at 20:04
  • Dirtandrust: What I am trying are rows of tiles. Look at Microsoft.com and you will see 3 tiles below the page banner. Except i'll have like 3 or 4 rows with 4 tiles per per row. I can achieve this with making the parent relative and child relative as well parent relative and child absolute. I want to to know what is best practice (if there is one). Jan 2, 2015 at 21:09

2 Answers 2

0

You should choose positioning method by the effect you want to achieve.

Relative positioning make other page elements aware of your element. This means that size and position of your element will impact size, position and behaviour of other page elements.

Absolute positioning removes the element from document's flow. It is rendered, but other elements are not aware of the fact that absolutely positioned element exists, so they behave like there was no element added at all.

E.g. Text will float around relatively positioned element, while absolutely positioned element will cover it, because text is not aware that the place it is rendered into is already occupied by your element.

0

If you know for sure what content is going to surround the elements and how large it will become then relative is a good way to go. It's good for flowing content (text, images, etc) of varying lengths.

But the drawback is shown here: http://jsfiddle.net/kxfn7bsj/1/

Relative will still be affected by outside elements, even if you use top left right bottom values as you did in your fiddle. This is where absolute comes in by placing the elements outside of the DOM flow so they are unaffected by neighboring/sibling dimensional layout changes (like in the updated fiddle above).

It all depends on how you need it structured.

2
  • (absolute positioned elements) they are unaffected by any dimensional layout changes : they are actually affected by the dimensional layout changes of the closest ancestor with relative position
    – JFK
    Jan 2, 2015 at 20:06
  • yep i was only focussed on the contrasting features of the two. didn't realize the poor wording I used.
    – Deryck
    Jan 2, 2015 at 20:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.