Jquery中文網 www.4271936.live
Jquery中文網 >  CSS教程  >  經典實例  >  正文 css 定位(相對定位與絕對定位)

css 定位(相對定位與絕對定位)

發布時間:2020-05-08   編輯:www.4271936.live
jquery中文網為您提供css 定位(相對定位與絕對定位)等資源,歡迎您收藏本站,我們將為您提供最新的css 定位(相對定位與絕對定位)資源
static是position的默認值position:relative與position:absolute及position:fixed三種方法了,下面我們一起來看看這幾種定位的例子。

可以使用 position:relative 對元素從排列順序的當前位置進行偏移
可用position:absolute 對元素從排列順序的當前位置或依照定位最近的祖先元素進行偏移
用position:fixed 對元素參照視窗進行偏移

浮動與清除

問題:想把一個元素從正常排列順序中移除,并令它靠父元素的左側或右側顯示。想把它當作塊狀元素來解析,并排列在父元素內邊距所包圍的區域里。還想讓它的頂部基于原始提取位置進行排列。還想控制鄰近的其他浮動元素或非浮動內容,或把它們移到自己的下面。

解決方案:

使用float:left和float:right
用float:none覆蓋其他元素進行浮動定位的規
浮動元素的定位層位置塊狀元素之上,與正常排列中的內聯內容是相鄰的。左浮動是對它的右側內容縮進,右浮動是對它的左側內容縮進。
浮動不影響塊狀盒模型的定位,只影響它們的內聯內容。
用clear:left把浮動元素左側的塊狀元素或其他浮動元素移到它的下面
用clear:right把浮動元素右側的塊狀元素或其他浮動元素移到它的下面
用clear:both把浮動元素兩側的塊狀元素或其他浮動元素同時移到下面

相對浮動

問題:想在不影響其他元素(包括其他浮動元素和內聯內容)定位的前提下,把浮動從現在位置上偏移。你還想控制浮動元素的(浮動元素之間或與其他定位元素之間)堆疊順序。

解決方案:用position:relative對浮動元素進行相對定位。相對浮動還保留了元素在原始浮動排列順序中的位置,只是用left和top將它從原來的位置上做一定的偏移。相對浮動也是在定位層被解析的,它允許你用z-index控制它相對于其他浮動元素和定位元素的堆疊順序。因為相對浮動也是對元素的一種定位方式,所以它的絕對后代可相對于它來進行定位。

 

層級關系為:
<div ——————————— position:relative; 不是最近的祖先定位元素,不是參照物
<div—————————-沒有設置為定位元素,不是參照物
<div———————- position:relative 參照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果圖:

 

 

為改變參照物(橘色框)后的效果
層級關系為:
<div ——————————— position:relative;最近的祖先定位元素,參照物
<div—————————-沒有設置為定位元素,不是參照物
<div———————-沒有設置為定位元素,不是參照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果圖:

 

 

參照物為最頂級的元素情況。
層級關系為:
<div ———————————沒有設置為定位元素,不是參照物
<div—————————-沒有設置為定位元素,不是參照物
<div———————-沒有設置為定位元素,不是參照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果圖:

 

 

 

 

僅使用margin屬性布局絕對定位元素的情況
此情況,margin-bottom 和margin-right的值不再對文檔流中的元素產生影響,因為該元素已經脫離了文檔流。另外,不管它的祖先元素有沒有定位,都是以文檔流中原來所在的位置上偏移參照物。  
圖9中,使用margin屬性布局相對定位元素。
層級關系為:
<div ——————————— position:relative; 不是參照物
<div—————————-沒有設置為定位元素,不是參照物
<div———————-沒有設置為定位元素,不是參照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div box3
效果圖:

 

 

IE6的情況下,box2前面沒有兄弟節點,則margin-left的值會出現雙倍邊距,見圖10。
層級關系為:
<div ——————————— position:relative; 不是參照物
<div—————————-沒有設置為定位元素,不是參照物
<div———————-沒有設置為定位元素,不是參照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:60px;
<div box3
效果圖:

 

您可能感興趣的文章:
jquery的相對父元素和相對文檔定位示例代碼
jQuery學習總結之元素的相對定位和選擇器(持續更新)
Jquery中的offset()和position()深入剖析
js獲取控件位置的方法
jquery獲得頁面元素的坐標值實現思路及代碼
jQuery 瀑布流 絕對定位布局(二)(延遲AJAX加載圖片)
jQuery拖拽div實現思路
jQuery 位置插件
jquery 元素相對定位代碼
深入解析JavaScript操縱窗口的方法

[關閉]
微信下载APP完成任务如何赚钱 上海天天彩选4基本走势图 山西十一选五走势图直选 上证指数权重排行 1分快3怎么倍投 极速时时彩有计划么 陕西11选5任选基本走势图玩法 好运快三怎么开奖结果 网页游戏靠什么赚钱 赛车pk10 全天免费北京pk拾赛车计划网