当前位置: 首页/ 学苑/走心Share/

关于css的positon定位分析总结及实例分享

2018-06-14| 阅读:806 |类别:走心Share

CSS 有三种基本的定位机制:普通流、浮动和绝对定位。

一、定位

position 属性值的含义(摘抄http://www.w3school.com.cn/css/css_positioning.asp):

static

       元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

relative

        元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。

        1、设置了relative,则这个框形成一个单独的层,可以与其他元素框重叠显示。

absolute

        元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

        1、在没有设置top、left等属性时,位置跟static时的位置一致,但是该元素框下面的元素框会上移到该元素框static的位置,两个元素框重叠

        2、并且当前层级较高,压在上面及下面的元素框上,可以通过z-index调整显示层级

        3、绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块

fixed

      元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

      1、在没有设置top、left等属性时,位置跟static时的位置一致,但是该元素框下面的元素框会上移到该元素框static的位置,两个元素框重叠

      2、并且当前层级较高,压在上面及下面的元素框上,可以通过z-index调整显示层级

      3、父级是absolute或者fixed,子元素定义为fixed,则此时的fixed的相对定位以父级为参考

提示:相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。

<div class="bank bank1"> <span class="span span1">span1--static</span>  bank1--static</div>
<div class="bank bank2"> <span class="span span2">span2--relative;left: 20px;</span>  bank2--relative</div>
<div class="bank bank3"> <span class="span span3">span3</span>   bank3--absolute;left: 0;top:100px;</div>
<div class="bank bank4"> <span class="span span4">span4</span>   bank4</div>
<div class="bank bank5"> <span class="span span5">span5</span>   bank5--fixed;top:155px;</div>
        .bank{
            height: 50px;
        }
        .bank1{
            background: red;
            width: 200px;
            position:static;
        }
        .bank2{
            background: orange;
            width: 300px;
            position: relative;
        }
        .bank3{
            background: yellowgreen;
            width: 400px;
            position:absolute;
            left: 0;
            top:100px;
        }
        .bank4{
            background: green;
        }
        .bank5{
            background: skyblue;
            position:fixed;
            top:155px;
        }
        .span{
            color: white;
        }
        .span1{
            position: static;
        }
        .span2{
            position: relative;
            left: 20px;
        }

二、浮动

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

例子:

bank6压在bank7上面,但是bank7内部的位子被挤到了下一行的位置???

<div class="bankF bank6">bank6</div>
<div class="bankF bank7">bank7</div>
<div class="bankF bank8">bank8</div>
        .bank6{
            background: blue;
            float: left;
        }
        .bank7{
            background: purple;
            /* float: left; */
        }
        .bank8{
            background: palevioletred;
            /* float: left; */
        }

三、应用

1、圣杯布局,为了让浏览器先渲染main板块

    <header>header</header>
    <section class="wrapper">
        <section class="col main">main</section>
        <aside class="col left">left</aside>
        <aside class="col right">right</aside>
    </section>
    <footer>footer</footer>
        header,
        footer {
            height: 50px;
            background: pink;
        }

        .wrapper {
            padding: 0 100px 0 100px;
            overflow: hidden;
        }

        .col {
            position: relative;
            float: left;
        }

        .main {
            /* position: relative;
            float: left; */
            width: 100%;
            height: 200px;
            background: yellowgreen;
        }

        .left {
            /* position: relative;
            float: left; */
            width: 100px;
            height: 200px;
            margin-left: -100%;
            left: -100px;
            background: purple;
        }

        .right {
            /* position: relative;
            float: left; */
            width: 100px;
            height: 200px;
            margin-left: -100px;
            right: -100px;
            background: blueviolet;
        }

原理:使用了 relative 相对定位、float(需要请浮动,此处使用 overflow:hidden; 方法)和 负值 margin ,将 left 和 right 部分「安装」到 wrapper 的两侧,顾名「圣杯」。

缺点:如果将浏览器无线变窄,「圣杯」将会「破碎」掉。如图,当 main 部分的宽小于 left 部分时就会发生布局混乱。

2、双飞翼布局–解决圣杯布局的缺点而诞生

    <header>header</header>
    <section class="wrapper">
        <section class="col main">
            <section class="main-wrap">main</section>
        </section>
        <aside class="col left">left</aside>
        <aside class="col right">right</aside>
    </section>
    <footer>footer</footer>
        header,
        footer {
            height: 50px;
            background: pink;
        }

        .wrapper {
            padding: 0;
            overflow: hidden;
        }

        .col {
            float: left;
        }

        .main {
            width: 100%;
            background: yellowgreen;
        }

        .main-wrap {
            margin: 0 100px 0 100px;
            height: 200px;
            background: red;
        }

        .left {
            width: 100px;
            height: 200px;
            margin-left: -100%;
            background: purple;
        }

        .right {
            width: 100px;
            height: 200px;
            margin-left: -100px;
            background: blueviolet;
        }

原理:同样使用了 float 和 负值 margin,不同的是,并没有使用 relative 相对定位 而是增加了 dom 结构,增加了一个层级。

缺点:增加了 dom 结构,增加了一个层级

3、两列布局–absolute绝对定位

浏览器宽度大于1200px时

浏览器宽度小于1200px时

    <div class="content">
        <div class="main">main</div>
        <div class="left">
            <ul>
                <li>11111111111</li>
                <li>22222222222</li>
                <li>33333333333</li>
            </ul>
        </div>
    </div>
        body {
            padding: 0;
            margin: 0;
        }
        
        .content {
            width: auto;
            max-width: 1200px;
            padding-left: 200px;
            box-sizing: border-box;
            margin: 0 auto;
            background: #f3f3f3;
            position: relative;
        }

        .left {
            width: 190px;
            position: absolute;
            top: 0;
            left: 0;
            background: orangered;
        }

        .main {
            width: 100%;
            background: green;
            min-height: 200px;
        }

4、在3的基础上,在左侧增加底部固定文字,并且底部文字不能覆盖上面的文字

备注:左侧增加高度及最小高度限制——

height: 100%;
min-height: 300px;
overflow-y: auto;

    <div class="content">
        <div class="main">
            main
            <section class="detail">content</section>
        </div>
        <div class="left">
            <ul>
                <li>11111111111</li>
                <li>22222222222</li>
                <li>33333333333</li>
                <li>11111111111</li>
                <li>22222222222</li>
            </ul>
            <ul class="abs">
                <li>底部固定文字列表</li>
                <li>dddddd--1111</li>
                <li>dddddd--2222</li>
                <li>dddddd--3333</li>
                <li>dddddd--4444</li>
            </ul>
        </div>
    </div>
        body {
            padding: 0;
            margin: 0;
        }

        .content {
            width: auto;
            max-width: 1200px;
            padding-left: 200px;
            box-sizing: border-box;
            margin: 0 auto;
            background: #f3f3f3;
            position: relative;
        }

        .left {
            width: 190px;
            position: absolute;
            top: 0;
            left: 0;
            background: orangered;
            height: 100%;
            min-height: 300px;
            overflow-y: auto;
        }

        .main {
            width: 100%;
            background: green;
        }

        .abs {
            position: absolute;
            bottom: 10px;
        }

        .detail {
            width: 100%;
            /* min-height: 300px; */
        }

A、当左侧高度大于右侧主题内容高度时

B、当左侧高度小于右侧主题内容高度时

综合实例:http://cruise.yaya12.com/#/

觉得有用,烦请给个小赏¥以资鼓励!~~