CSS绝对定位

2016.07.07 22:58
**绝对定位是根据第一个不是static定位（默认定位）的父元素进行定位。可以直接把父元素设置成position定位，单不设置top和left属性。这样父元素还是在原位上，绝对定位的子元素也很好的可以定位。

今天在做网页的时候遇到了一个问题。需要做成效果是这样的。（下图中的“未处理”，盖章样式的效果）

效果的难点是在于div.result定位。可以看出它是跨在了div.title的下边界上。仔细看，div.title存在下边界线，颜色比较淡。
我一开始使用float:right;属性来对div.result进行定位，可以达到图中的定位效果，但是下面的div.body里的文字和按钮都会被挤走，打乱他们的布局。
我知道float属性，不在文档流中排序。但是当时不知道的是，虽然不在文档流中排序，但是其他的框依然会为它让位子。这就是div.body里的内容排版被打乱的原因。
而用positon:absoulte;来进行定位，也是不在文档流中占位，同时完全不影响别的div排版布局。可以用z-index属性来调整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属性，有两个值，作为旋转的顶点（就是围绕哪个点来进行旋转）的坐标。默认是50% 50%（也就是center center)。