20180614-CSS-css定位-position属性详解

HTML中的三种布局方式：

标准流；顺序布局

浮动；

定位；

HTML两大元素：

1，块级元素；独占一行！

div h1~6 列表（ol,ul,li ） table p 等等；

2，内联元素；一般不会独占一行！

a超链接 span文字 img图片 input空键

20180614-CSS-css定位-position属性详解

position中的可选参数：

static:默认值，正常排列

relative:相对定位，利用left top right bottom来改变元素的位置。

absolute:绝对定位，利用left top right bottom，后写的内容覆盖之前的。

fixed:固定定位，不受制于父元素，即使父元素有了position属性。

inherit:继承继承fixed的父元素时，

会出现emmmmm不一样的地方！！！！

记得弄清楚这个啊！！！！！

【position:inherit;//继承了父元素的fixed;此时就会相对于浏览器定位;不会相对于父元素定位,】

absolute：绝对定位。将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义
。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。
fixed：固定定位。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。当对象定位在浏览器窗口以外，浏览器不会因此显示滚动条，而当滚动条滚动时，对象始终固定在原来位置。
relative：相对定位。对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。
static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
inherit：继承值，对象将继承其父对象相应的值。

relative：

left top

20180614-CSS-css定位-position属性详解

right bottom

20180614-CSS-css定位-position属性详解

absolute：相对窗口定位。

left top 左下角为原点

right bottom 右下角为原点

z-index

20180614-CSS-css定位-position属性详解

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出层案例</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        
        html, body{
            width: 100%;
            height: 100%;
        }
        
        .content{
            width: 100%;
            height: 4043px;
            background: url("mooc.png") center top no-repeat;
        }
        
        .login{
            width: 360px;
            height: 362px;
            background: url("login.png") no-repeat;
            z-index: 2;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-top: -181px; 
            margin-left: -180px; 
        }
        
        .opacity_{
            width: 100%;
            height: 100%;
            background: url("img/opacity.png") no-repeat;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 0;
        }
    </style>
</head>
<body>
    <div class="content"></div>
    <div class="login"></div>
    <div class="opacity_"></div>
</body>
</html>