Home > Web Front-end > HTML Tutorial > position attribute problem_html/css_WEB-ITnose

position attribute problem_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:13:18
Original
891 people have browsed it

        <div class="right">        	<div class="shadow"></div>      	</div>
Copy after login


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


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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template