2016.07.07 22:58
**絕對定位是根據(jù)第一個不是static定位（默認定位）的父元素進行定位?？梢灾苯影迅冈卦O(shè)置成position定位，單不設(shè)置top和left屬性。這樣父元素還是在原位上，絕對定位的子元素也很好的可以定位。
今天在做網(wǎng)頁的時候遇到了一個問題。需要做成效果是這樣的。（下圖中的“未處理”，蓋章樣式的效果）
效果的難點是在于div.result定位?？梢钥闯鏊强缭诹薲iv.title的下邊界上。仔細看，div.title存在下邊界線，顏色比較淡。
我一開始使用float:right;屬性來對div.result進行定位，可以達到圖中的定位效果，但是下面的div.body里的文字和按鈕都會被擠走，打亂他們的布局。
我知道float屬性，不在文檔流中排序。但是當(dāng)時不知道的是，雖然不在文檔流中排序，但是其他的框依然會為它讓位子。這就是div.body里的內(nèi)容排版被打亂的原因。
而用positon:absoulte;來進行定位，也是不在文檔流中占位，同時完全不影響別的div排版布局。可以用z-index屬性來調(diào)整z軸上的層疊順序。
*順便貼一下div.result效果的css代碼：
.result{
position: absolute;
top: 10px;
left: 550px;
margin-right: 100px;
border: solid 1px #E99696;
width: 60px;
height: 60px;
border-radius: 50%;
color: #E99696;
text-align: center;
line-height: 60px;
vertical-align: top;
/瀏覽器兼容性問題/
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-o-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
在使用CSS3中的transfrom屬性是，要注意瀏覽器兼容問題。
***要使用 transform:rotate();屬性必須先定義transform-origin屬性，有兩個值，作為旋轉(zhuǎn)的頂點（就是圍繞哪個點來進行旋轉(zhuǎn)）的坐標(biāo)。默認是50% 50%（也就是center center)。
