css定位和css背景

1. 定位

定位:position : ;

有4个值:

static静态定位(默认值,没有定位) , relative相对定位, absolute绝对定位,fixed固定定位

1.1 相对定位

相对定位:position:relative;

相对定位的特点:

1. 相对于静态位置的定位,它不会脱离文档流.

2. 就算离开之前的位置,也不会影响页面的布局

3. 有4个方向的值:left top right bottom

4. 设置left为正值,则元素会相对于没有定位时的位置往右边移动,同理,设置top为正值,元素会相对没有定位时的位置向下移动.

5. 如果同时设置left 与 right的值,起作用的是left

6. 常用在元素位置的微调,和给绝对定位的元素做参考元素

1.2 绝对定位

绝对定位:position:absolute;

1.2.1 绝对定位的特点:

1. 绝对定位的元素会脱离文档流

2. 其他位置的元素会当做绝对定位的元素不存在一样的顶上去.

3. 如果只给元素添加定位属性,而没有设置left top right bottom值,那么他一定是处于静态位置(没有设置定位的位置)

4. 没有指定left..几个值时,默认是auto.(没有设置,那么原来在哪,现在就在哪里)

1.2.2绝对定位方向值的计算:

如果子元素绝对定位,父元素没有定位后,父元素是已经管不着子元素了

1. 那么子元素是根据什么来定位的呢?

   它是根据包含块来计算的

   包含块(BFC):块级格式化上下文;

   任何元素都有一个包含块,任何元素都是在它的包含块中布局

1. 那绝对定位是怎么找包含块的呢?

   它是先从直接的父元素开始找,看有没有祖先元素开启了定位,一旦有祖先元素开启了定位,

   那么它就停止寻找,那找到的第一个开启了定位的祖先元素就是它的包含块

2. 那left top right bottom是跟怎么计算的呢?

   它是根据包含块的四个边的距离进行计算的

1. 例子:计算left的值

   是定位元素的margin外边缘距离包含块的边边框内边缘

1. .一般设置了子元素绝对定位后,就会设置父元素相对定位(子绝父相),这样父元素就是子元素的包含块

2. 一个绝对定位的元素的尺寸:

   left+margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right+right=父容器的边框左右内边缘的距离

3. 一个元素定位的值是包含块的边框内边缘到定位元素的margin外边缘的距离

1.2.3 绝对定位的水平垂直居中

            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            /*当同时设置了left right时 牺牲的时right,就是 会按照left来*/
            left:0;
            right:0;
            /*
            只要left和right设为同样的值就能满足水平居中,
            但是他们的值不能超过父元素留给他们的位置,就像这个一旦超过150就会溢出.
            */
            top:0;
            bottom:0;
            /*这是margin过来*/
            margin:auto;
            /*要是想垂直居中还可以设置上下都为0*/

1.2.4 绝对定位的覆盖

1. 绝对定位后出现重叠,怎么排序呢?

   默认是按照html的结构排序,谁的排版在后面就是谁先显示

   我们可以通过z-index的值来改变

   z-index默认值为0,越大越在前面显示

   注意:当两个父元素指定了z-index的值时,它不会去看子元素的z-index值,

   如果没有指定,那就会去比较子元素的z-index值.

1.3 固定定位

固定定位会完全脱离文档流,定位的参考物是视窗,也可以认为是浏览器的窗口

2. 背景

2.1 设置背景图片

设置背景图片:background-image:url图片地址;

默认是x轴,y轴平铺.同时设置背景颜色和背景图片,背景图片会覆盖背景颜色

2.2 设置图片的平铺方式

设置图片的平铺方式:background-repeat: repeat

可选值:

repeat 默认值,x,y轴都平铺

no-repeat x,y轴都不平铺

repeat-x x轴平铺

repeat-y y轴平铺

也可以这样子写:background-repeat: no-repeat repeat;代表x轴不平铺,y轴平铺

2.3 设置图片的定位

设置图片的定位:background-position:;

可选值：

该属性可以使用 top right left bottom center中的两个值

来指定一个背景图片的位置

top left 左上

bottom right 右下

如果只给出一个值，则第二个值默认是center

也可以直接指定两个偏移量，

第一个值是水平偏移量

​ 如果指定的是一个正值，则图片会向右移动指定的像素

​ 如果指定的是一个负值，则图片会向左移动指定的像素

第二个是垂直偏移量 如果指定的是一个正值，则图片会向下移动指定的像素 如果指定的是一个负值，则图片会向上移动指定的像素