CODEWITHSUNDEEP
htmlcss
user1400915
user1400915

Reputation: 1943

Position of an element in the middle of div using relative and absolute properties

I had to place some text in the middle of its parent element . I have achieved it with the following code :

#div1 {
  position: relative;
  margin: 0;
  padding: 0;
}

#div2 {
  width: 100%;
  position: relative;
  height: 3.21em;
  margin: 0;
  background-color: red;
}

#p1 {
  display: block;
  right: 48%;
  top: 3.21em;
  position: absolute;
  background-color: green;
  margin: 0
}
<div id="div1">
  <div id="div2">

  </div>
  <p id="p1">
    Hello From Web
  </p>
</div>

But my question is if I use position: relative for the paragraph , the same thing doesnt work i.e.,place the text in the middle doesnt work,

#p1 {
  display: block;
  right: 48%;
  top:3. 21em;
  position: relative;
  background-color: green;
  margin: 0;
}

I just wanted to know whats happening behind the scenes with relative positioning .

I am aware of the basic difference between the two from many tutorials which goes like this " position absolute means something like use top right bottom left to position itself in relation the nearest ancestor which has position as either absolute or relative. Position relative means position the element in relation to its immeditate parent."

Going by the above definition, the parent is div1 for p in both relative and absolute positioning cases .

Then what else is it that I am missing in my understanding that is giving me the different results?

Upvotes: 0

Views: 147

Answers (2)

CoenFuze
CoenFuze

Reputation: 494

You could fix this by using the transform property. The problem is that the width of the element isn't calculated when using position absolute. Browsers place the outer left or outer right at 50% of the relative parent. In your example the #p1 selector outer right is placed at 48% percent, if you would change this to 50%, the right side will be placed exactly at 50% of the parent element.

To rectify the width of the element you could use this:

#p1 {
position: absolute;
left: 50%;
transform: translateX(-50%);
}


#div1 {
    position: relative;
    margin: 0;
    padding: 0;
}

#div2 {
    width: 100%;
    position: relative;
    height: 3.21em;
    margin: 0;
    background-color: red;
}

#p1 {
    display: block;
    left: 50% ;
    transform: translateX(-50%);
    top: 3.21em;
    position: absolute;
    background-color: green;
    margin: 0
}
<div id="div1">
    <div id="div2">

    </div>
    <p id="p1">
        Hello From Web
    </p>
</div>

The translate property uses the element width to transfrom itself. Hope this helps.

Upvotes: 1

shaochuancs
shaochuancs

Reputation: 16246

I just wanted to know whats happening behind the scenes with relative positioning

The description highlighted "from many tutorial" is incorrect, especially for position relative.

According to the specification, relative position means:

Once a box has been laid out according to the normal flow or floated, it may be offset relative to this position. This is called relative positioning.

In short, relative position means "relative" to itself, not to its parent.

Then what else is it that I am missing in my understanding that is giving me the different results?

I think this question has already been answered from above explanation. If #p1 is defined as position: relative;, its right & top are all related to its origin place (when its position is not defined). That's why you will see a blank area above it (like margin-top, which is caused by top: 3.21em), and a left offset.

Upvotes: 1

Related Questions