CSS——定位方法

2019-10-27 16:02:48 阅读：172 来源： 互联网

标签：定位 100px height 1px background position 方法 CSS box2

一. 使用position定位

① position:static.

是默认的定位方式。

② position:relative.

使用这种方式的元素会脱离文档流，相对于它本应该在的位置进行偏移，并且，该元素原来所在的位置会保留下来。

    .box1 {
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        background: #ccc;
    }

    .box2 {
        left: 100px;
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        background: green;
        position: relative;
    }

    <div class="box1">
        <div class="box2"></div>
    </div>

挡在box2的css里加入position:relative;之后，box2就会脱离文档流，相对于自己以前的位置来定位（在本例中是left:100px，所以box2会向左移动100px，如下图）

③ position:absolute.

与relative不同的是，absolute定位的元素相对于距离最近的具有定位属性的元素进行定位，逐级上找，直到body为止。另外，absolute的元素原来的位置不再保留。

在修改box1和box2的代码如下：

    .box1 {
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        background: #ccc;
        position: relative;  /* 父元素，用于给box2定位 */
    }

    .box2 {
        left: 100px;
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        background: green;
         position: absolute; /* 会相对于box1进行定位 */
    }

这里截图我就不截了，效果和②中的效果一模一样。

④ position:fixed.

fixed定位的元素会相对于浏览器窗口定位，所以这种元素位置不会发生改变。

修改box1让box1的高变为2000px，出现滚动条，当滑动滚动条的时候，box2使用fixed定位，位置会保持不变。

    .box1 {
        width: 100px;
        height: 2000px;
        border: 1px solid #000;
        background: #ccc;
    }

    .box2 {
        right: 100px;
        bottom:100px;
        width: 20px;
        height: 20px;
        border: 1px solid #000;
        background: green;
        position: fixed; 
    }

二、使用float

float的元素都会脱离文档流，使用left、right定位。并且默认的z-index等于0。这种元素具有以下特点：

无视z-index为0的元素，排挤非float的元素。例如float:left,那么该行上非float就会被挤到下一个位置。
同为float的元素按顺序排列。

下面的代码验证了上述的两个特点：

    .box1 {
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        background: #ccc;
        display: inline-block;
        z-index: -1;
    }

    .box2 {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        background: green;
        display: inline-block;
        float: left;
    }

    <div class="box1"></div>
    <div class="box2"></div>

标签：定位,100px,height,1px,background,position,方法,CSS,box2
来源： https://blog.csdn.net/qq_40686529/article/details/102766733

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS——定位方法

一. 使用position定位

二、使用float