11.定位

最新推荐文章于 2019-07-25 21:47:35 发布

121689Stone

最新推荐文章于 2019-07-25 21:47:35 发布

阅读量257

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_37993288/article/details/77507874

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

定位方向：left | right | top | bottom

静态定位:`position:static;`

为定位的默认值，就是文档流

<head>
    <style type="text/css">
        .box{
            width:100px;
            height:100px;
            background:red;
            positiong:static;
            left:200px;
    </style>
</head>
<body>
    <div class="box"></box>
</body>

显示结果没变化
这里写图片描述

绝对定位：`position:absolute;`

特点：

元素使用绝对定位之后不占据原来的位置（浮动了）。

<head>
    <style type="text/css">
        .box{
            width:100px;
            height:100px;
            background:red;
            positiong:absolute;
            left:100px;
        }
        .box1{
            width:200px;
            height:200px;
            background:green;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
</body>

这里写图片描述

元素使用绝对定位，方向位置是从浏览器出发。

<head>
    <style type="text/css">
        .box{
            width:100px;
            height:100px;
            background:red;
            positiong:absolute;
            top:0px;
            right:0px;
        }

    </style>
</head>
<body>
    <div class="box"></box>
</body>

这里写图片描述

嵌套的盒子，父盒子没有使用定位，子盒子使用了绝对定位，那么子盒子的方向位置从浏览器出发。
嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置从父元素位置出发。
※z-index:2;调整元素的层叠顺序，默认值：0-999，值越大，元素越在层叠顺序的上面。
给行内元素使用绝对定位之后，转换为行内块元素。（不推荐使用，推荐：display：inline-block;）

相对定位：position:relative;

※特点

使用相对定位，方向位置从自身出发。
使用相对定位，还占据原来位置，不会产生浮动。
子绝父相（子元素使用绝对定位，父元素使用相对定位），较多使用。这样父元素不会脱离标准流（不会浮动），子元素方向位置从父元素出发。
行内元素使用相对定位不能转为行内块。

固定定位：`position:fixed;`

※特点：

元素使用固定定位后，不占据原来位置（浮动）；
元素使用固定定位后，位置从浏览器出发；
元素使用固定定位后，会转为行内块元素。（不推荐使用）

定位的盒子居中显示

margin:0 auto; 在没有浮动元素(标准的盒子)时居中对齐。
定位的盒子居中：先左走父元素盒子的一半50%，再向左走盒子的一半（margin-left:负值；文档流是自左向右，向左走即为负值。）

.nav{
    width:960px;
    height:60px;
    background:#666;
    position:absolute;
    bottom:0;
    left:50%;
    margin-left:-480px;
}

121689Stone

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
11.定位

定位方向：left | right | top | bottom静态定位:position:static;为定位的默认值，就是文档流<head> <style type="text/css"> .box{ width:100px; height:100px; background:r
复制链接

扫一扫