模型定位

来源：互联网发布：cpu百分率 linux命令编辑：程序博客网时间：2024/06/05 19:22

一.position属性

对当前标签对象进行定位操作，属性规定元素的定位类型
取值范围：静态（static），相对（relative），绝对（absolute）、固定（fixed）
css四个属性（top、left、right、bottom）只有在设置了position值为relative、absolute、fixed情况下才有效

二.relative(相对定位)

格式说明：position:relative
相对定位特点：
①. 通过top、left、bottom、right来设置元素的新位置偏移（相对于当前位置）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title>Title</title>    <style type="text/css">        .box1,.box2{            width: 100px;            height: 100px;            position: relative;        }        .box1{            background-color: red;            top: 10px;            z-index: 1;        }        .box2{            margin-left: 10px;            background-color: #0000FF;        }    </style></head><body>    <div class="box1"></div>    <div class="box2"></div></body></html>

这里写图片描述

三.fix(固定定位)

格式说明：position:fixed
固定定位特点：
- 通过top、left、bottom、right来设置元素的新位置偏移(相对于浏览器视窗)
- 固对定位的元素脱离标准文档流，不受文档流约束

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        *{            margin: 0;            padding: 0;        }        .bg1{            background-color: red;        }        .bg2{            background-color: #6c5d4c;        }        .bg3{            background-color: yellow;        }        .bg{            height: 500px;            position: relative;        }        .fixBox{            position: fixed;            z-index: 1;            top: 10px;            left: 20px;            width: 100px;            height: 400px;            background-color: lightgray;        }    </style></head><body>    <div class="fixBox">固定的面板</div>    <div class="bg bg1">    </div>    <div class="bg bg2">    </div>    <div class="bg bg3">    </div></body></html>

这里写图片描述

四.absolute(绝对定位)

格式说明：position:absolute；
绝对定位特点
- 通过top、left、bottom、right来设置元素的新位置偏移
- 相对定位的元素脱离标准文档流

案例:

未使用绝对定位两个div布局如下
当红色div使用绝对定位后，蓝色占据原来红色div的位置（因为相对定位的元素脱离标准文档流）代码如下

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .box1,.box2{            width: 100px;            height: 100px;        }        .box1{            position: absolute;            top: 50px;            left: 50px;            background-color: red;        }        .box2{            background-color: #0000FF;        }    </style></head><body>    <div class="box1"></div>    <div class="box2"></div></body></html>

五.定位参考点

如果绝对定位盒子外层没有盒子
- top：以距离页面顶部具体top长度显示
- bottom：以距离当前浏览器底部bottom值显示
如果绝对定位盒子外层还有盒子
- 默认相对于浏览器绝对定位偏移
- 如果要相对父容器绝对定位，则要遵循如下规则：父元素必须要有定位（绝、相、固）设置

六.z-index定义

属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺- 序较低的元素的前面（默认为0）
z-index只有在当前元素设置了position的时候才有效
特性：
- 随父性：父元素的z-index值，会影响子元素的重叠效果

0 0