position定位干货

定位

Position-设置定位方式
top,right,bottom,left,z-index --设置位置

top right bottom left

image

元素边缘距参照物的边缘的距离

Demo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>位置</title>
    <style>
        .sample{background-color: pink;}
        .sample{position: absolute;}

        /*.sample{top: 30px;left: 30px;}*/ 注释掉以后会距上边30px 距左边30px
        /*.sample{bottom: 30px;right: 30px;}*/注释掉以后div会被撑开
    </style>
</head>
<body>
    <div class="sample">sample</div>
</body>
</html>

z-index

image

z轴上的排序:默认为z-index:0; 正值越大,在z轴上越在上面,在下面的会被覆盖.

z-index:-value;值可为负值

是不是值越大约在上面呢?不一定

z-index栈

image

上图有两个定位元素,如果给z-index:1;元素这个定位,父元素设为z-index:9; z-index:100;的元素的祖先元素设为z-index:1; z-index红色元素盖在了绿色元素上

Demo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>z-index</title>
    <style>
        .sample0, .sample1{position: absolute;width: 200px;line-height: 150px;text-align: center;}
        .sample0{background-color: #ff0;}
        .sample1{background-color: pink;}

        .sample1{top: 100px;left: 100px;}正常情况下的排列是按照元素在文档流中的位置排的
            
        /*.sample0{z-index: 9;}*/    会在上面

        /*.container0, .container1{position: relative;}*/
        /*.container1{z-index: 99;}*/    
    </style>
</head>
<body>
    <div class="container0"><div class="sample0">sample 0</div></div>
    <div class="container1"><div class="sample1">sample 1</div></div>
</body>
</html>

position

position: static | relative | absolute | fixed

position:relative

仍在文档流中
参照物为元素本身
可以改变z轴上的层级
使用场景:绝对定位元素的参照物

image

Demo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        .container{width: 400px;line-height: 2;border: 1px dashed #aaa;}
        .sample{background-color: pink;}

        .sample{position: relative;}
        .sample{top: 10px;left: 30px;}
    </style>
</head>
<body>
    <div class="container">
        <div>相对定位元素的前序元素</div>
        <div class="sample">sample</div>
        <div>相对定位元素的后序元素</div>
    </div>
</body>
</html>

position:absolute

默认宽度为内容宽度
脱离文档流(浮起来了)
参照物为第一个定位祖先/根元素
使用场景:轮播头图

Demo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        .container{width: 300px;margin: 50px;line-height: 2;border: 1px dashed #aaa;}
        .sample{background-color: pink;}

        /*.sample{position: absolute;}*/
        /*.sample{bottom: 10px;left: -30px;}*/
        /*.container{position: relative;}*/
    </style>
</head>
<body>
    <div class="container">
        <div>绝对定位元素的前序元素</div>
        <div class="sample">sample</div>
        <div>绝对定位元素的后序元素</div>
    </div>
</body>
</html>

position:fixed(固定定位)

默认宽度为内容宽度
脱离文档流
参照物为视窗
使用场景:固定顶栏 遮罩

Demo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>fixed定位</title>
    <style>
        .container{width: 400px;margin: 200px;line-height: 2;border: 1px dashed #aaa;}
        .sample{background-color: pink;}
        
        /*.sample{position: fixed;}*/    脱离文档流
        /*.sample{bottom: 0;left: 10px;}*/   相对于视窗定位
        /*.container{height: 1000px;}   */
    </style>
</head>
<body>
    <div class="container">
        <div>绝对定位元素的前序元素</div>
        <div class="sample">sample</div>
        <div>绝对定位元素的后序元素</div>
    </div>
</body>
</html>

遮罩

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>遮罩</title>
    <style>
        .mask{
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: 0.3;
        }
        .content{
            height: 3000px;
        }
    </style>
</head>
<body>
    <div class="mask"></div>
    <div class="content">content area</div>
</body>
</html>

固定顶栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>固定顶栏</title>
    <style>
        body{margin: 0;line-height: 1.8;}
        .top{background-color: pink;color: #fff;}
        .main{height: 3000px;background-color: #eee;}


        body{padding-top: 50px;}
        .top{position: fixed;top: 0;width: 100%;height: 50px;}
    </style>
</head>
<body>
    <div class="top">top bar</div>
    <div class="main">main content area</div>
</body>
</html>

使用定位怎么做布局?看个DEMO

三行自适应布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>三行自适应布局</title>
    <style>
        .head{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100px;
            background-color: #ccc;
        }
        .body{
            position: absolute;
            top: 100px;
            left: 0;
            bottom: 100px;
            right: 0;
            overflow: auto;
        }
        .content{
            height: 2000px;
        }
        .foot{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div class="head">head</div>
    <div class="body">
      <div class="content">content area</div>
    </div>
    <div class="foot">foot</div>
</body>
</html>