定位

本文详细介绍了CSS中各种定位方式的特点与应用,包括相对定位、绝对定位、固定定位等,并解析了透明度属性的使用技巧。

一、position:relative 相对定位

a、如果没有设置偏移值 元素不会发生任何变化;
b、不使元素脱离文档流(元素移动之后原始位置会被保留);
c、他不会改变元素的特性;
d、提示层级为整层
e、偏移是参照自己的位置
f、作为绝对定位元素的父级
定位元素位置控制
top/right/bottom/left (相对自己的)定位元素偏移量。

二、position:absolute 绝对定位

a、使元素完全脱离文档流;
b、提示层级为整层;
c、不设置宽度时 块元素默认内容撑开;
d、如果有最近的已定位(相对定位 绝对定位)父级 就参照他定位 否则参照浏览器 document;
e、相对定位一般都是配合绝对定位元素使用;
f、使内联元素支持宽高

三、z-index:[number]; 定位层级

    a、无论相对定位还是绝对定位,定位元素默认后者层级高于前者;
    b、层级比较在同级元素之间,如果子元素设置了z-index的值,而父元素和父元素的兄弟元素都没设置z-index的值,那么该子元素可以显示在父元素的兄弟元素之上。如果父元素和父元素的兄弟元素都设置了z-index的值,那么子元素相对父元素的兄弟元素就和父元素是同级的。
    c、z-index值默认为0,值都为0时,后面的元素层级高于前面元素的层级,z-index值高的层级高,会优先在上面显示。

四、position:fixed固定定位、其他定位

position:fixed; 固定定位
1、与绝对定位的特性基本一致,的差别是始终相对整个文档进行定位;
2、永远参照可视区域
问题:IE6不支持固定定位;

定位其他值:
position:static ; 默认值
position:inherit ; 从父元素继承定位属性的值 (不兼容)

position:relative | absolute | fixed | static | inherit;

五、透明

透明度: opacity:0~1; 值越小越透明(内容也会透明)
IE 滤镜: filter:alpha(opacity=0~100);
如果想设置背景透明,而内容不透明,可以单独设置背景透明度,实现方法如下:
background:rgba(255,0,0,0.4);rgba方法的前三个参数为16进制的颜色代码,第四个参数是设置透明度的值。

六、居中问题

div{
width:100px;
height:100px;
background:red;
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
}
css3新增了方法calc已经用来定位:
left:calc(50% - 50px);浏览器宽度的50%-50px;
top:calc(50% - 50px)浏览器高度的50%-50px;
同样可以让元素居中。
还可以通过js来技术距离在设置偏移量来实现居中。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值