標籤：
在css的絕對位置問題中如果絕對位置的元素沒有最近已定位的父元素，那麼它相對與初始包含塊進行定位。其中初始包含塊是是呢？body? html? viewport?
：
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><style>html{border:2px groove #F0F;padding:50px;margin:50px;}body{border:2px dotted red;margin:20px;padding:20px;}div{border:1px solid blue;background-color:lightblue;height:300px;}img{position:absolute;left:0px;bottom:0px;}</style></head><body>i am okok i am okoki am okok i am okok i am okok i am okok i am okok i am okok i am okoki am okok i am okok i am okok i am okok i am okok okok i am okok i am okokokok i am okok i am okokokok i am okok i am okokokok i am okok i am okok<img src="12.jpg" width="300px" height="300px"><div>everything will be ok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okok this is okokthis is okok this is okok this is okok this is okok</div></body></html>
可以看出此時top:0px left:0px 的映像既不相對與body也不想對於html,而是相對與視窗螢幕的左上方。
如果把top:0px改成bottom:0px, 這是相對與第一屏的左下角(即使有下拉式清單)。
如果要想讓定位得img相對於html或body,有兩種方法:
1.把html,body{margin:0px; padding:0px}
2.body設定為position:relative顯示指定已body元素作為初始包含塊。
相關文章
css絕對位置中的初始包含塊問題
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
