首頁 > web前端 > html教學 > position属性问题_html/css_WEB-ITnose

position属性问题_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 12:13:18
原創
891 人瀏覽過

        <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;	}
登入後複製


重点是,为什么right的position属性为relative时,shadow是在right内的,当right的position属性为默认static时,shadow就到页面左上角去了?


回复讨论(解决方案)

绝对定位的元素的位置是相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(也就是body)。

绝对定位的元素的位置是相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(也就是body)。

那意思static算未定位,relative算已定位吗?


.right
float:right;
这个你写的呀

绝对定位的元素的位置是相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(也就是body)。
++++

static就是position的默认值,也就是未定位。

absolute 相对BODY定位
其他相对父容器定位吧。

relative生成相对定位的元素,相对于其正常位置进行定位。这时候shadow会相对于right进行left 0像素的偏移,top 2像素的偏移。
static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

这种情况十有八九是因为你的html没有遵循w3c标准

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板