HTML元素布局 - position - transform

position 属性规定元素的定位类型。

这个属性定义__建立__元素布局__所用的__定位机制。

任何元素都可以定位,

不过绝对或固定元素会生成一个块级框(BFC),而不论该元素本身是什么类型。

相对定位元素会相对于它在正常流中的默认位置偏

默认值:static
继承性:no
版本:CSS2
JavaScript 语法:object.style.position="absolute"

 

描述
absolute

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit规定应该从父元素继承 position 属性的值。

实践一下,容易理解。

box1-absolute,在下面例子里是在parent里水平居中,假如parent不设置position,那么就会在body里居中

box2-relative,top加了10px,显示比正常位置下移了10px。

<!doctype html>
<style>
div{border:solid 1px;}
.parent{
position:relative;
left:100px;
border:solid red;
height:100px;width:100px;
}
.box1 {
border:solid blue;
position: absolute;
left:50%;
    transform: translate(-50%, 30px);
}
.box2{
position:relative;
top:10px;
}
</style>
<body>
<div class=parent>
<div class=box1>
aaa
</div>
<div class=box2>
bbb
</div>
<div class=box3>
ccc
</div>
</div>
</body>
</html>

 

 

 

transform: translate(tx[, ty])。其中 tx 表示 x 方向偏移,ty 表示 y 方向偏移,如果 ty 没有指定值则为0。

tx,ty 如果为百分比值的话,其参考计算的是元素本身的宽和高,而不是父元素的宽和高。所以经常使用该方法设置定位居中,代码如下:

position: absolute;
  top: 50%; /* 父元素高度的一半位置 */
  left: 50%; /* 父元素宽度的一半位置 */
  transform: translate(-50%, -50%); /* 元素本身的一半宽、高 */

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值