有關絕對定位的全面理解
我要評論<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>有關絕對定位的理解</title>
</head>
<style type="text/css">
/* 1.未被設置定位之前是大盒子包裹著小盒子，符合標準文檔流，如圖片1所示
.box1{
width: 500px;
height: 500px;
background:red;
}
.box2{
width: 200px;
height: 200px;
background:blue;
}*/
圖片1
/*2. 絕對定位使元素的位置與文檔流無關，因此不占據(jù)空間。
這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，
因為元素的位置相對于它在普通流中的位置。絕對定位的元素的位置相對于最近的已定位祖先元素，
如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊。
如圖2所示
.box1{
width: 500px;
height: 500px;
background:red;
position: relative;
}
.box2{
width: 200px;
height: 200px;
background:blue;
position:absolute;
top:150px;
left:150px;
}*/
圖片2
/*3、box2沒有寬高并且在不設置定位的情況下,box2會被box1包裹,符合標準文檔流，并且在占據(jù)文檔的位置,
寬繼承父元素的寬,高由內(nèi)容自動撐開。
如圖片3.
.box1{
width: 500px;
height: 500px;
background:red;
}
.box2{
background:blue;
}*/
圖片3
/*4、box2沒有寬高在設置定位的情況下,box2會脫離文檔流,并且位置在指定相對于相對定位元素的位置,
寬會失效,就是說寬高都由內(nèi)容自動撐開的.如圖片4.如需要寬高需另設置*/
.box1{
width: 500px;
height: 500px;
background:red;
position: relative;
}
.box2{
background:blue;
position:absolute;
top:150px;
left:150px;
}
圖片4
</style>
<body>
<div class="box1">
<div class="box2">這是一個小盒子</div>
</div>
</body>
</html>
以上這篇有關絕對定位的全面理解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
原文地址：http://www.cnblogs.com/fybsp58/p/5684711.html
相關文章
- 這篇文章主要為大家介紹了絕對定位元素被遮擋的解決方法,涉及使用css絕對定位的使用技巧,非常具有實用價值,需要的朋友可以參考下2014-12-13
CSS絕對定位元素left設為50%實現(xiàn)水平居中
絕對定位的元素left設為50%時，是已左上角為原點的，所以只要再使用margin屬性添加負值補償回來即可，下面示例代碼，需要的朋友可以參考下2014-09-04- 當絕對定位元素的鄰近浮動元素的寬度大于父層寬度減3時，該絕對定位元素在ie6下面會隱藏，解決方法就是調整浮動元素的寬度，即寬度小于或等于父層寬度減32014-06-05
- 設置絕地定位的元素必須設置兩個相對定位的元素，也就是小A的紅色框框，和小C的藍色框框，設置他們的層級關系，下面有個示例，大家可以參考下2014-03-31
- 在某些時候可能需要將一個絕對定位的div在它的父對象中垂直居中對齊，可能用到的頻率不是太高，但是偶爾也會用到，下面就簡單介紹一下如何實現(xiàn)此功能2014-01-27
- 本文主要介紹了css的絕對定位的使用方法，大家參考使用吧2014-01-27