HTML元素布局 - position - transform

最新推荐文章于 2023-10-23 13:04:48 发布

永生天地

最新推荐文章于 2023-10-23 13:04:48 发布

阅读量475

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/xys_777/article/details/114057091

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录