CSS定位布局

来源：互联网发布：阿房宫读音知乎编辑：程序博客网时间：2024/06/10 00:28

1.静态定位（static）

2.相对定位（relative）：特点：相对自身原有位置进行偏移。

仍处于标准的文档流中

随即拥有偏移性和z-index属性。

列如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

#1{background:#099;position:relative;top:50px;}

#2{background:#903;}

</style>

</head>

<body>

</body>

</html>

3.绝对定位：absolute。特点：建立了以包含块为基准的定位

完全脱离了标准的文档流。（对兄弟元素没有影响）随即拥有偏移性和z-index属性。当一个元素设置绝对定位时，没有设置宽度时，其宽度会随着内容进行调整。

设置偏移参照基准：

无已定位祖先元素，以<html>为偏移参照基准。

有已定位祖先元素，以其最近的定位祖先为偏移参照基准。

列如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

#1{background:#099;position:relative;top:50px

#2{background:#099;position:absolute;top:50px;height:100px;}

#3{background:#903;height:100px;}

</style>

</head>

<body>

</body>

</html>

相对定位比绝对定位稳定得多，所以通常都用相对定位。

可以设置4个属性值，除了上面3个属性值外还包含固定定位（fixed）属性。

横向两列布局
使用绝对定位实现横向两列布局，应用比较少
使用absolute实现横向两列布局：常用于一列固定宽度，另一列宽度自适应的情况
主要应用技能：
relative--对父元素进行相对定位；
需要注意的是：***固定宽度列的高度要大于自适应宽度的列***因为自适应宽度脱离了标准文档流所以它无法把父元素撑开
absolute--对需要自适应宽度的元素进行绝对定位

0 0