九、HTML中的定位

1、定位

position
static
默认值
没有使用定位
relactive
相对定位
absolute
绝对定位
fixed
锚定

标准文档流

标准文档流
从上到下，从左向右，依次显示网页中的每一个元素
元素分类
行内元素
依次一个挨着一个显示
块级元素
独占一行

static 定位

以标准文档流方式显示
没有定位
默认值

relative相对定位

relative
相对自身原来位置进行偏移
值
top、bottom、left、right
像素值
正：向右，或，向下
负：向左，或，向上
不脱离标准文档流，原有的位置保留不变，后续元素不能占用其原有位置
在这里插入图片描述

absolute绝对定位

absolute
偏移设置
top、bottom、left、right
像素值
正：向右，或，向下
负：向左，或，向上
以它最近的一个已经定位的祖先元素为基准进行偏移
若没有已经定位的祖先元素，以浏览器窗口为基准进行偏移
绝对定位从标准文档流中脱离，后续元素会占其原有的位置
在这里插入图片描述

6、fixed 锚点定位

fixed
相对于浏览器窗口

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.d1 {width: 200px;height: 200px;background-color: blue;}.d2 {width: 200px;height: 200px;background-color: red;position: relative;top: -100px;left: 100px;}.d3 {width: 200px;height: 200px;background-color: yellowgreen;position: relative;top: 100px;left: 100px;}.d4 {width: 200px;height: 200px;background-color: green;}.d5 {width: 100px;height: 100px;background-color: green;position: fixed;right: 0;bottom: 0;}</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>
</body>
</html>

在这里插入图片描述

7、z-index重叠时显示的顺序

z-index重叠时显示的顺序
值越大，在上
值越小，在下
特殊的值
0最下面
1688第1个

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.d1 {width: 200px;height: 200px;background-color: blue;position: relative;top: 100px;z-index: 2;}.d2 {width: 200px;height: 200px;background-color: red;position: absolute;top: -100px;left: 100px;z-index: 1688;}.d3 {width: 200px;height: 200px;background-color: yellowgreen;position: absolute;top: 100px;left: 100px;z-index: 0;}.d4 {width: 200px;height: 200px;background-color: green;z-index: 3;}</style>
</head>
<body>
<div class="d1"><div class="d2"></div>
</div>
<div class="d3"></div>
<div class="d4"></div>
</body>
</html>

在这里插入图片描述

8、透明度

若使用png透明背景图片时，下面的内容可见的，通常不需要透明度，否则图书变淡

方法1：属性
opacity:0.5;

方法2：过滤器
filter:alpha(opacity=50);

浏览器兼容性问题

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.d1 {width: 200px;height: 200px;background-color: blue;position: relative;top: 100px;z-index: 2;}.d2 {width: 200px;height: 200px;background-color: red;position: absolute;top: -100px;left: 100px;z-index: 1688;opacity: 0.4;}.d3 {width: 200px;height: 200px;background-color: yellowgreen;position: absolute;top: 100px;left: 100px;z-index: 0;}.d4 {width: 200px;height: 200px;background-color: green;z-index: 3;}</style>
</head>
<body>
<div class="d1"><div class="d2"></div>
</div>
<div class="d3"></div>
<div class="d4"></div>
</body>
</html>