This exercise says that an absolutely positioned element will be positioned “relative to its closest positioned parent element”. What does it mean for a parent element to be positioned?

Frequently Asked Questions CSS FAQ
1

Question

This exercise says that an absolutely positioned element will be positioned “relative to its closest positioned parent element”. What does it mean for a parent element to be positioned?

Answer

Within this context, a positioned element is any element whose position property is not set to the default static value. For example, consider the following code snippet:

<body>
<div class="parent">
 		 <div class="child"></div>
</div>
	</body>
          ```

           ```
	.parent {
  background: pink;
  height: 100px;

  position: relative;
  top: 60px;
}

.child {
  background: blue;
  width: 50%;
  height: 100%;

  position: absolute;
  top: 50px;
}

	```

The `.child` div will be placed relative to the “positioned” `.parent` div. This means that .child will be placed 50px from the top of .parent . As .parent is 60px from the top of the screen, .child will be 50px + 60px = 110px from the top of the screen.