4.元素定位

最新推荐文章于 2024-07-25 08:14:42 发布

jojo999888

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量250

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/gc_20160403/article/details/76093866

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

定位方向：left right top bottom

position:static 静态定位（位置的默认值）

<head>
    <style type="text/css">
        .box{
            width:300px;
            height:200px;
            background:red;
            position:static;
            left:200px;   (并不会移动，因为static是默认值）
    </style>
</head>
<body>
    <div class="box"></div>
</body>

2.position:absolute 绝对定位
特点：

元素使用绝对定位之后不占据原来位置。（浮动起来了）
元素使用绝对定位，位置是从浏览器出发。
嵌套的盒子，父盒子没有使用定位，子盒子使用了绝对定位，子盒子位置从浏览器出发。
给行内元素使用绝对位置会转化为行内块元素。（不推荐使用，推荐使用display:inline-block;）

3.position:relative相对定位
特点：

使用相对定位，位置从自身出发。
使用相对定位，元素还占据原来位置，没有浮动。
子绝父相：子元素使用绝对定位，父元素使用相对定位，子元素位置从父级元素出发。（较多使用）
行内元素使用相对定位不能转为行内块元素。

4.position:fixed固定定位
特点：

元素使用固定定位之后，不占据原来位置。（会浮动）
元素使用固定定位之后，位置从浏览器出发。
行内元素使用固定定位之后，会转化为行内块元素。（不推荐使用，推荐使用display:inline-block;）

jojo999888

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
4.元素定位

定位方向：left right top bottom position:static 静态定位（位置的默认值）<head> <style type="text/css"> .box{ width:300px; height:200px; background:red;
复制链接

扫一扫