html背景图片垂直居中,css — 定位、背景图、水平垂直居中

css — 定位、背景图、水平垂直居中

目录

1. 定位

2. 背景图

3. 水平垂直居中

1. 定位

position:static | relative | absolute | fixed;

static 静态定位

relative 相对

absolute 绝对

fixed 固定

1.1 静态定位

静态定位意味着“元素默认显示文档流的位置”。没有任何变化。

1.2 相对定位 relative

1.特征：

给一个标准文档流下的盒子单纯的设置相对定位，与普通的盒子没有任何区别

留“坑”，会影响页面布局

2.作用：

1.用于微调元素

2.做“子绝父相”布局方案的参考

3.参考点：

以原来的盒子为参考点

4.相对定位的值：top 、bottom 、left 、right

.box {

width: 500px;

height: 600px;

border: 1px solid #000;

}

.box .a {

width: 200px;

height: 200px;

background-color: red;

}

.box .b {

width: 200px;

height: 200px;

background-color: green;

position: relative;

top: 30px;

left: 50px;

}

.box .c {

width: 200px;

height: 200px;

background-color: blue;

}

1.3 绝对定位 absolute

1.参考点：

判断是否有定位(相对定位，绝对定位，固定定位)的祖先盒子进行定位：

1.如果没有定位的祖先盒子，以body为参考点

2.如果单独设置了一个盒子为绝对定位：

1.以top描述，它的参考点是以body的(0，0)为参考点

2.以bottom描述，它的参考点是以浏览器的左下角为参考点

2.子绝父相

以最近的父辈元素的左上角为参考点进行定位

3.特征：

1.脱标

2.压盖

3.子绝父相

.box {

width: 500px;

height: 600px;

border: 1px solid #000;

position: relative;

float: right;

}

.box .a {

width: 200px;