Absolute position inside absolute position : Absolute positioned parent block's width

Question

Here is my code... absolute position inside absolute position... When I give the div position: relative; it stretches over the body tag like it is block level , but when it is given position: absolute; , it looks like an inline level element ... I don't understand why ?

div {
  background: red;
  margin: 0 0 0 50px;
  font-size: 2em;
  position: absolute;
}

span {
  background: green;
  color: #fff;
  height: 100px;
  position: absolute;
  left: 0;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ssss</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div>Begining <span>NORO</span> some text text text</div>
</body>

</html>

_"I don't understand why ?"_ - because: https://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width — CBroe, Jun 22 '17 at 09:22
i just dont understand the issue ... I know that absolutely positioned elements are automaticly given display: block , so absloute position inside absolute position make the parent div inline ... why ??? — Norayr Ghukasyan, Jun 22 '17 at 09:24
How is it any different whether the absposed element is outer or inner? Don't they *both* shrink-wrap to look like inline elements? Why are you so surprised by this? — BoltClock, Jun 22 '17 at 09:57
Please review and comment on my answer, and let me know if something is unclear or missing. If not, then it would be great if you could accept the answer that helped you the most. — Asons, Jun 25 '17 at 18:41

score 0 · Answer 1 · answered Jun 22 '17 at 09:14

0

Position absolute shrinkswraps the element and make it not taking space in the document normal flow.

answered Jun 22 '17 at 09:14

itacode

3,721
3
21
23

Thank you ... ))) – Norayr Ghukasyan Jun 22 '17 at 11:30

score 0 · Answer 2 · answered Jun 22 '17 at 09:36

A quick, simple search got me these possible explanations:

css-tricks says the following (absolute relative fixed positioning how do they differ):

Relative. This type of positioning is probably the most confusing and misused. What it really means is "relative to itself". If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it's positioning at all, it will be exactly as it would be if you left it as position: static; But if you do give it some other positioning attribute, say, top: 10px;, it will shift its position 10 pixels down from where it would normally be. I'm sure you can imagine, the ability to shift an element around based on its regular position is pretty useful.(...) There are two other things that happen when you set position: relative; on an element that you should be aware of. One is that it introduces the ability to use z-index on that element, which doesn't really work with statically positioned elements. Even if you don't set a z-index value, this element will now appear on top of any other statically positioned element. You can't fight it by setting a higher z-index value on a statically positioned element. The other thing that happens is it limits the scope of absolutely positioned child elements. Any element that is a child of the relatively positioned element can be absolutely positioned within that block. This brings up some powerful opportunities which I talk about here.

Absolute. This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left, bottom. and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the element itself meaning it will be placed relatively to the page itself. The trade-off (and most important thing to remember) about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn't affect other elements. This is a serious thing to consider every time you use absolute positioning. Its overuse or improper use can limit the flexibility of your site.

When looking at absolute positioning inside relative positioning, you will see the exact explanation of why the behavior/positioning of the span changes when the parent element ( in your case) gets position: relative.

Hope this helps you in clarifying the behavior.

Absolute position inside absolute position : Absolute positioned parent block's width

2 Answers2