CSS:position属性

来源：互联网发布：如何引出大数据编辑：程序博客网时间：2024/05/22 18:34

盒子定位

在使用CSS进行网页布局时，可以利用元素position属性来指定元素的位置。相关属性如下：

①静态定位（static）

static:默认，没有任何移动效果。

②相对定位（relative）

生成相对定位的元素，相对于其正常位置进行定位。水平通过left或者right设置垂直通过top或者bottom。

③绝对定位（absolute）

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。水平通过left或者right设置垂直通过top或者bottom。

④固定定位（fixed）

类似于绝地定位，不过的他的基准不是祖元素，而是浏览器窗口。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>position属性</title>    <style type="text/css">    .father{background-color:#FF6600 ;border: 1px dashed #000000;}    .block1{position:static;}    .block2{position: relative;left: 15px; top: 20px;}        .block3{position:absolute;left:100px;top:150px}    .block4{position: fixed;left:200px;top:200px;}    </style> </head><body><div class="father"><div class="block1"><b>静态定位</b></div>    <div class="block2"><b>相对定位</b></div>    <div class="block3"><b>绝对定位</b></div>            <div class="block4"><b>固定定位</b></div></div></body></html>

0 0