day04:定位

一、相对定位的使用

1.相对定位

position: relative;

设置定位位置

定位位置：相当于元素的初始位置

 定位后原来的位置会保留 不会影响其他元素布局

left: 20px;
right: 100px; 
top: 100px;
bottom: 100px;

二、绝对定位的使用

1.绝对定位

定位后，原来的位置会被其他元素占用  影响其他元素布局

position: absolute;

2.设置定位的位置 

定位位置相当于拥有定位的外层元素 如果外层和元素没有定位 定位位置相当于body 

right: 100px;

bottom: 100px;

三、相对定位绝对定位配合使用

 1.

div{
    border: 4px solid lawngreen;
     width: 300px;
     position: relative;
    }
div img{
       vertical-align: middle;
        width: 300px;
        }
div span{
        position: absolute;
        bottom: 10px;
        right: 10px;
        }

<img src="img/1.jpg" alt="">

    <span>更新到第十集</span>

四、固定定位的使用 

固定定位：定位位置 相对于浏览器可视窗口

position: fixed;

<h1>非诚勿扰</h1>

    <div>

        <a href="#">返回顶部</a>

    </div>

 

五、层级

设置层级 z-index值越大 层级越高  

不设置默认层级小于1

z-index: 1; 

同时定位在一个位置的元素 文档后面的层级高(在上面) 

六、居中问题

1.块属性元素水平居中  给自己设置margin:0 auto

 margin: 0 auto;

2.其他属性元素水平居中 给父元素设置 text-align:center

text-align: center; 

3.行高

line-height: 200px; 

单行文本垂直居中  给父元素设置line-height：父元素高度