首页 > > 网页制作 > css >

布局 position

2018-06-24 00:35:53来源：未知阅读 ()

position : 设置定位方式

跟『定位』相关的有一些属性，最重要的一个是『position』，它主要是设置『定位方式』。

而定位方式最重要的是设置『参照物』.

配合 position 使用的有这些属性:

属性名	值	描述
top		元素上边缘距离参照物边缘的距离
right		元素右边缘距离参照物边缘的距离
bottom		元素下边缘距离参照物边缘的距离
left		元素左边缘距离参照物边缘的距离
z-index

position	static	静态的，是元素默认的，比如block是换行，inline是同行。
	relative	相对定位
	absolute	绝对定位
	fixed	固定定位

top,right,bottom,left,z-index 必须给position设置，如果不是一个定位元素，设置这些属性是不起效果的。

top/right/bottom/left

设置『元素边缘』到『参照物边缘』的距离

绿色线框区域为参照位置。

为什么不用x,y 定位，而选用 top right bottom left来定位呢？如果要把红色区域定位到右下角，还得计算红色区域的大小。

举个栗子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>位置</title>
    <style type="text/css">
    .sample{
        background-color: pink;
    }
    .sample{
        position: absolute;
    }
    /* 上边缘距离参照物(页面顶部) 距离30px, 左边缘距离参照物(页面左边) 距离30px */
    .sample{
        top: 30px;
        left: 30px;
    }
    /* 下边缘距离参照物(页面底部) 距离30px, 右边缘距离参照物(页面右边) 距离30px */
    .sample{
        bottom: 30px;
        right: 30px;
    }
    </style>
</head>
<body>
<div class="sample">sample</div>
</body>
</html>

z-index

配合position 来使用的，设置元素在『Z轴』上的排序

z-index 默认是 0

是不是z-index 越大的就越放在上面呢？不一定，因为 z-index 还有个『栈』的概念。

在父元素的 z-index 相等默认为 0 的情况下，子元素 z-index越大的越靠近上方。而当父元素本身比较小时，子元素再大也是小于其他 z-index 较大的元素的子元素。

右边的图这就相当于两副扑克牌摞在一起，下面牌盒里的牌，无论怎么内部变换位置都不可能高于上面牌盒中的牌。

举个栗子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>z-index</title>
    <style type="text/css">


    .sample0,.sample1{
        position: absolute;
        width: 200px;
        line-height: 150px;
        text-align: center;
    }

    .sample0{
        background-color: #ff0;
    }
    .sample0{
        z-index: 1;
    }

    .sample1{
        background-color: pink;
    }
    .sample1{
        top: 100px;
        left: 100px;
    }
    .sample1{
        z-index: 99;
    }

    .container0,.container1{
        position: relative;
    }

    .container0{
        z-index: 99;
    }
    .container1{
        z-index: 1;
    }


</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>

两个绝对定位的元素， z-index 值大的元素一定在 z-index 值小的元素的上方。 ×

position: relative 相对定位

相对定位的元素，仍在文档流中。在文档流中就是按照文档流中的顺序进行排列，即块级元素换行排列，行级元素同行排列。

相对定位的元素，参照物为元素本身。

position : relative 使用最多的场景: 绝对定位元素的参照物

举个栗子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>position_relative</title>
    <style type="text/css">
    .div1,.div2,.div3{
        width: 300px;
        height: 80px;
        margin:10px 10px 0px 10px;
    }
    .div1{

        background-color:#ff9e3e; 
    }
    .div2{
        background-color:#ff7b2e;
        position: relative;
/*        top: 10px;
        left: 20px;*/



        color: white;
        font-family: "Microsoft YaHei";
        font-size: 22px;
    }
    .div3{
        background-color:#ff9e3e;
    }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2">position: relative;</div>
<div class="div3"></div>
</body>
</html>

去掉对top 和 left 的注释后:

position: absolute 绝对定位

绝对定位的元素，默认宽度为内容宽度

绝对定位的元素，脱离文档流

绝对定位的元素，参照物为第一个定位祖先 / 根元素

绝对定位元素的参照物是他的父元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>相对定位</title>
    <style type="text/css">
    .container{
        width: 400px;
        line-height: 2;
        border: 1px dashed #aaa;
        position: relative;
    }

    .sample{
        background-color: pink;
    }

    .sample{
        position: absolute;
    }
    .sample{
        bottom: 10px;
        left: -30px;
    }
    </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 type="text/css">
    .is{position: relative;width: 480px;}
    .is.img{display: block;}
    .is .title{position: absolute;bottom: 0;
        margin: 0;width: 100%;line-height: 45px;
        background-color: #000;opacity: 0.7;}
    .is .controls{position: absolute;bottom: 18px;
        right: 10px;line-height: 10px;}
    .is .controls span{display: inline-block;
        width: 10px;margin: auto 1px; height: 10px;
        border-radius: 10px; background-color: gray;}
    .is .controls span.cur{background-color: #fff;}
    </style>
</head>
<body>
<div class="is">
<img src="红茶_b.jpg">
<p class="title"><a href="asfas">老徐视线：北京潮女出门逛街不穿内衣</a></p>
<div class="controls"> 
<span></span><span class="cur"></span><span></span><span></span><span></span>
</div>
</div>
</body>
</html>

position: fixed 固定定位

默认宽度为内容宽度

脱离文档流，不在占据原来的位置，它下面的元素会占据他的位置。

参照物为『视窗』

举个栗子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>fixed定位</title>
    <style type="text/css">
     .container{
         /*position: relative;*/
         border: 1px dashed red;
         width: 400px;
         line-height: 2;
         margin: 200px;
         height: 1000px;
     }

     .sample{
         background-color: pink;
     }
     .sample{
         position: fixed;
         bottom: 0;
         left: 10px;
     }
    </style>
</head>
<body>
<div class="container">
        <div>绝对定位元素的前序元素</div>
        <div class="sample">sample</div>
        <div>绝对定位元素的后序元素</div>
</div>
</body>
</html>

粉红色div，display:fixed 相对于视窗底部0, 左侧10px。固定在那个位置不动。

布局--固定顶栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>固定顶栏</title>
    <style type="text/css">
    body{ margin: 0;line-height: 1.8; }
    body{padding-top: 50px;}
    .top{
        height: 30px;
        background-color: pink;
        color: #fff;    
    }
    .top{
        position: fixed;top: 0;width: 100%;height: 50px;
    }
    .main{
        background-color: #bebebe;
        height: 1000px;
    }
    </style>
</head>
<body>
    <div class="top">top bar</div>
    <div class="main">main content area</div>
</body>
</html>

也可以用在回到顶部，购物车图标等位置.

布局--遮罩

核心代码

<div class="mask"></div>

.mask{position: fixed;top: 0;left: 0;z-index: 999;width: 100%;height: 100%;}

举个栗子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>遮罩</title>
    <style type="text/css">
        .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>

布局: 三行自适应布局

顶栏：固定在窗口最上面的。

foot：固定在窗口最下面的。

内容区：是自适应的。

滚动条：出现在内容区。

核心代码:

<div class="head">head</div>
<div class="body">body</div>
<div class="foot">foot</div>

.head{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100px;
    }
    .body{
        position: absolute;
        top: 100px;
        left: 0;
        bottom: 100px;
        right: 0;
    }
    .foot{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100px;
    }