大前端笔记06

HTML第一阶段day06-定位

定位

三种布局方式： 文档流、浮动布局、层布局（定位）
1、静态定位（不定位） position:static;
静态定位的元素按照文档流内的位置排列
2、相对定位 position:relative;
偏移参考位置：本身在文档流内的位置
不会脱离文档流，在文档流内的位置为其保留
3、绝对定位position:absolute;
偏移参考元素：离绝对定位的元素最近的带有position属性的祖先元素, 如果不存在就是相对body定位
会脱离文档流
4、固定定位position:fixed;
偏移参考位置:浏览器可视窗口
会脱离文档流
5、z-index 调整定位元素的层级

定位的元素才能使用z-index

多个定位的元素默认按照顺序决定层级，越靠后层级越高
通过z-index属性可以改变层级，默认z-index值为0 ,数字越大层级越高

6、位置偏移属性：
top: 距离参考位置顶部的偏移 正值向下 负值向上
bottom : 距离参考位置低部的偏移 正值向上 负值向下
left: 距离参考位置左边的偏移 正值向右 负值向左
right : 距离参考位置右边的偏移 正值向左 负值向右

• top和bottom同时设置，top生效
• left和right同时设置，left生效

脱离文档流的属性

    float:left
    float:right
    position:absolute
    position:fixed

• 脱离文档流的元素不区分块级、行内，默认都由内容撑开，可以设置所有和盒模型属性。
• 浮动的元素脱离文档流，但是不脱离文本流，文字、图片和表单元素不会被浮动元素覆盖，会围绕浮动元素排列
• 定位的元素既脱离文档流，又脱离文本流

盒子水平垂直居中

1、通过绝对定位，给left和top都设置为50%，再通过margin-left:向左移动宽度的一半，margin-top:向上移动宽度的一半

   .inner {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background-color: red;
   }  

2、通过绝对定位，left/right/top/bottom的值都是0，margin:auto;

    .inner {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto auto;
            width: 300px;
            height: 200px;
            background-color: red;
    }