If Inline box is relative positioning, then what is its block-level box affected by?-CodePudding

I'm confused about this sentence.

When such an inline box is affected by relative positioning, any resulting translation also affects the block-level box contained in the inline box.

I don't know whether the "relative positioning" is the general meaning, I mean it can be absolute or fixed, and other properties of display, e.g, inline-block.

Let's see examples.

I know DIV broke the line box, but position: relative seems useless, I can remove it directly.

.father {
  position: relative;
  border: 1px solid red;
}

<span >
  <div>Hi Wick</div>
</span>

But, If I modified relative to absolute, I knew the line box wasn't "broke", so border worked normally. If I added the inline-block property of display, the result is the same.

.father {
  position: absolute;
  border: 1px solid red;
}

<span >
  <div>Hi Wick</div>
</span>

Also, what does any resulting translation mean? I know some behaviors may change containing block, so they will be affected by their descendants. I'm not sure whether it is about the containing block.

Therefore, I need some examples!

CodePudding user response：

A <span> element is inline, which means it has no "box" around it to apply a border to. It's treated the same as a line of text with no container. Imagine it as a horizontal line where the center of each letter inside it is placed on that line. Applying position: absolute; to a <span> causes it to be treated the same as if it was display: block;, which is why the border property works on it then.

In your first example, the inner div is a block level element inside an inline element. If you applied a border to the div, you'd see it stretches across the width of the container to fill the space horizontally. Since the parent span is inline, the border doesn't show like you want it to, but the height of the child div at least gives some level of "size" to the span, if only vertically.

Also, "any resulting translations" just refers to CSS properties that move the element on the screen, such as left, right, top, bottom, or transform: translate();.

CodePudding user response：

A div in a span??? If I understand the question, you want a red box around a span, not a div... Try this instead. I hope this may help, my English is really poor. Have a nice day.

.father {
  position: absolute;
  border: 1px solid red;
  width:100px;
  background-color: antiquewhite;
  color:black;
  transition:2s;
}
.father:hover {
  position: absolute;
  border: 1px solid red;
  width:400px;
  transform: translate(30px,50px);
  background-color:black;
  color:white;
  transition:2s;
}

<div >
  <span>Hi Wick</span>
</div>