position attribute problem_html/css_WEB-ITnose

        <div class="right">        	<div class="shadow"></div>      	</div>

.right{	width:30%;	float:right;	position:relative;	}.shadow{	width: 100px;	height: 100px;	background-color: rgb(237, 237, 237);	position: absolute;	left: 0px;	top: 2px;	}

The point is, why is the shadow inside right when the position attribute of right is relative? When the position attribute of right is static by default, The shadow has gone to the upper left corner of the page?

Reply to discussion (solution)

The position of an absolutely positioned element is relative to the nearest positioned ancestor element, if the element has no positioned ancestors element, then its position is relative to the original containing block (that is, the body).

The position of an absolutely positioned element is relative to the nearest positioned ancestor element. If the element has no positioned ancestor elements, then its position is relative to the original containing block (that is, the body).

Does this mean that static is not positioned and relative is positioned?

?
.right
float:right;
You wrote this

The position of an absolutely positioned element is relative to the nearest positioned ancestor element. If If the element has no positioned ancestor elements, its position is relative to the original containing block (that is, the body).

static is the default value of position, which is not positioned.

absolute relative to BODY positioning
Other relative parent container positioning.

relative generates a relatively positioned element, positioned relative to its normal position. At this time, the shadow will be offset by 0 pixels to the left and 2 pixels to the top relative to the right.
static Default value. Without positioning, the element appears in normal flow (ignoring top, bottom, left, right or z-index declarations).

This situation is most likely because your html does not follow the w3c standard