-3

I know I should use position: relative; so that it follows the inline block behaviour for both the elements so that they don't over lap & are placed inline next to each other because each element is recognized as a block

But I am curious, when position is absolute it no longer recognize that element as a block & allows overlapping, why so?

eg 1:-

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title> Hello </title>
  </head>
  <body>
    <div class="container" style="display:inline-block; background-color:black; height:500px; width:500px; position: relative; left:20px;">
      <div class="red" style="display:inline-block; background-color:red; height:100px; width:100px; position: absolute;"></div>
      <div class="blue" style="display:inline-block; background-color:blue; height:100px; width:100px; position: absolute; left:20px;"></div>
    </div>
  </body>
</html>

2:

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title> Hello </title>
  </head>
  <body>
    <div class="container" style="display:inline-block; background-color:black; height:500px; width:500px; position: relative; left:20px;">
      <div class="red" style="display:inline-block; background-color:red; height:100px; width:100px; 
      position: relative;"></div>
      <div class="blue" style="display:inline-block; background-color:blue; height:100px; width:100px; position: relative;"></div>
    </div>
  </body>
</html>
Pranav Raykar
  • 29
  • 7
  • 3
    did you read the definition of position:absolute? all the explanation is there – Temani Afif Sep 07 '20 at 19:52
  • yes, absolute positions allows you to shift the position relative to its parent element its nested in, so it has a dynamic behaviour, like a seat in a car, car moves hence seat moves Could you link it here, I am a beginner. – Pranav Raykar Sep 07 '20 at 19:57
  • https://developer.mozilla.org/en-US/docs/Web/CSS/position position: absolute; treats the element like it's falling on a grid in mathematics: if you do not specify the top, right, bottom, and left properties (any of them), then the element will be placed in the top-left of the container. This may be unexpected as it is not the same orientation as line graph, but is standard in a computer display. – ryanwebjackson Sep 07 '20 at 20:49
  • 1
    Does this answer your question? [Why do absolute elements stack up on each other instead of stacking one after the other?](https://stackoverflow.com/questions/20718577/why-do-absolute-elements-stack-up-on-each-other-instead-of-stacking-one-after-th) – Tubs Sep 08 '20 at 16:42

2 Answers2

2

Elements with position absolute are not in a normal flow. Document flow is the arrangement of page elements, as defined by CSS positioning statements, and the order of HTML elements. this is to say, how each Definition takes up space and how other elements position themselves accordingly. Take a look: https://soulandwolf.com.au/blog/what-is-document-flow/#:~:text=by%20John%20Rosato,other%20elements%20position%20themselves%20accordingly. and this https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow

Gena Kainovskiy
  • 125
  • 5
  • Okay, I read it thanks, I was just testing whether display:inline-block works on elements which are positioned with absolute, So would it be correct in assuming that Out-of-flow elements are not affected by display:inline-block property?, So the follow up would be, when an element is fixed, absolute, out-of-flow, what other css properties don't affect it? – Pranav Raykar Sep 07 '20 at 20:27
  • Also when I use fixed positioned elements, will that fixed element also shift if it is nested inside a parent element. and the parent element is shifted? – Pranav Raykar Sep 07 '20 at 20:33
  • @PranavRaykar display: inline-block; works only if it is normal flow. Position 'fixed' works not as 'absolute'. 'Absolute positions the element relative to the parent with 'relative' or 'absolute' property. 'Fixed' positions the element relative to the 'body' and it is not depends on parent position property(absolute, relative or fixed). – Gena Kainovskiy Sep 08 '20 at 10:54
0

When you set it to absolute positioning, this element will find the nearest parent element with positioning for positioning. Relative positioning refers to the change of this element relative to its position.

乔二阳
  • 1
  • Ok now the question arises, when I place an element out-of-flow, what all css properties get neglected? Also is the relative positioned element with an display inline-block in flow or out-of-flow? – Pranav Raykar Sep 07 '20 at 20:42
  • An element is called out of flow if it is floated(float:left/right), absolutely positioned(position:absolute/fixed), or is the root element(html). An element is called in-flow if it is not out-of-flow. – 乔二阳 Sep 08 '20 at 02:27
  • so if an element's position:static/relative & its display: inline-block, its still in flow right? – Pranav Raykar Sep 08 '20 at 19:31
  • bingo.https://stackoverflow.com/questions/3293340/what-is-the-meaning-of-the-terms-normal-flow-and-out-of-flow-in-terms-of-ht – 乔二阳 Sep 09 '20 at 02:01