0

I cannot work out what rules the layout is following in the following example and wonder if anyone can help.

The exmaple I will use to explain the issue is: If there are just two elements - paragraphs - within a body element and the first paragraph element is absolutely positioned and the second is not, the presence of the second paragaph element causes the first to be layed-out lower than it would be if it was the only element. Why is this?

Also, by adding a border to the body element or by making its padding even just 1px, the position of the absolutely positioned element is no longer affected by the presence of the second paragraph.

The code I am using to demonstate this is:

<!DOCTYPE html>
<html>

<head>
  <title>Title</title>
  <style type="text/css">
    body {
      margin: 0px;
      padding: 0px;
    }
    
    p#a {
      border: 1px solid black;
      position: absolute;
      margin: 0px;
    }
  </style>
</head>

<body>

  <p id="a">Some text in absolutely positinoed paragraph</p>
  <p>Some text in normal paragraph</p>

</body>

</html>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
boofplahboof
  • 11
  • 2
  • default margin of p elements – Temani Afif May 13 '20 at 21:23
  • (1) first duplicate will explain the static position of absolute position since you didn't specify any top value (2) second duplicate will explain the margin collapsing behavior making the margin of the p element outside the body (which will define the static position in (1) ) – Temani Afif May 13 '20 at 21:25
  • ^ TL;DR if you set top:0 you won't have this issue – Temani Afif May 13 '20 at 21:27
  • @TemaniAfif. Thank you for pointing me to the other two posts. I have read them but they are not the same question and don't answer my question. Please would you consider opening my question so I can understand the reason behind the CSS behaviour? – boofplahboof May 14 '20 at 11:41
  • what you still didn't understand from those two answers? they contain all the information you need to understand what is happening in your question and I already commented to explain what is happening. What are you missing? – Temani Afif May 14 '20 at 11:44
  • @TemaniAfif The two examples were related to sibling elements and collapsing borders. This is not the case with my example. If you could open it up to other users to answer I might be able to understand the process that is happening, at the moment it is a mystery to me. Thank you. – boofplahboof May 14 '20 at 11:48
  • did you read my comments? It seems you did not read anything from what I said ... – Temani Afif May 14 '20 at 11:49
  • @TemaniAfif. I did read them but they don't make sense to me as they do not explain what is happening in my example. – boofplahboof May 14 '20 at 11:59
  • you need to consider my comments to understand .. (1) you have a margin collapsing between your p element and body (because p is having a default margin) [this is explained in the second duplicate) then (2) the positionned element is using its static position making it at the top of the body that have a the margin from (1) [explained in the second duplicate] <-- here is your answer and the duplicate will give you the details of each part – Temani Afif May 14 '20 at 12:02
  • @TemaniAfif Thanks, I have considered your comments but I think you are just not realising that the problem I am highlighting is not the same as the others. If you look at the problem I posted you might understand it is a totaly different problem. There are no collapsing margins becasue I have set the absolutely positioned element's to 0 and the same witht the body's. I have not set it's position so it should remain where it would be had I not set its position property to absolute. The only difference is it should have no effect on other elements layouts and they should have no effect on its. – boofplahboof May 15 '20 at 20:42
  • there is a collpasing margin between body and your SECOND p element. Not the positionned element, the second paragraph has a default margin that is collapsing with body. Check the dev tool and you will notice this. Apply margin:0 to the second p and see the difference. Also add top:0 to the absolute element and see the difference too – Temani Afif May 15 '20 at 21:00
  • @TemaniAfif Thanks for your reply. I understand how to fix the problem such as adding top:0 as you suggested (or by adding a border to the body element or making its padding even just 1px). However I was looking for an explanation of what box model layout rules are being followed to cause the issue in the first place and still neither of the 2 examples you cited explain this. What has the 2nd paragaph's placement got to do with the first (absolutely positioned paragraph's) placement? Please would you consider opening this up so others may have the opportunity to see what is happening? Thanks – boofplahboof May 16 '20 at 17:29

0 Answers0