css之position属性

最新推荐文章于 2024-07-06 14:50:23 发布

HU_LSS

最新推荐文章于 2024-07-06 14:50:23 发布

阅读量115

点赞数

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

本文链接：https://blog.csdn.net/weixin_43527195/article/details/114335012

版权

开发专栏收录该内容

11 篇文章 0 订阅

订阅专栏

css之position属性

postion属性我们成为定位，它有4个不同类型的定位，这些类型会影响元素的生成方式

（1）static

static是position属性的默认值，默认情况下，块级元素和行内元素按照各自的特性进行显示。

2）relative

relative翻译成中文称相对定位，设置了这个属性后，元素会根据top，left，bottom，right进行偏移，关键点是它原本的空间仍然保留

（3）absolute

元素设置成absolute后会脱离文档流，并且不占有原本的空间，后面的元素会顶替上去，而且不论元素是行内元素还是块级元素，都会生成一个块级框，也就是例如行内元素span设置了absolute后就可以设置height和width属性了。

relative与absolute实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div { background: #0094ff; width: 250px; height: 100px; }
        .relative {
            background: #ff6a00;
            position: absolute;
            width: 200px;
            height: 100px;
            top: 20px;
            left: 50px;
        }
        .absolute {
            background: red;
            //position: absolute;
            width: 200px;
            height: 100px;
            top: 20px;
            left: 50px;
        }
    </style>
</head>
<body>
<div class="absolute"></div>
<div class="relative"></div>
<div></div>
</body>
</html>

relative
在这里插入图片描述

（4）fixed

fixed的表现方式类似于absolute，但是相比于absolute相对于不确定的父元素进行偏移，fixed就是相对于浏览器窗口进行偏移。

HU_LSS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css之position属性

css之position属性postion属性我们成为定位，它有4个不同类型的定位，这些类型会影响元素的生成方式（1）staticstatic是position属性的默认值，默认情况下，块级元素和行内元素按照各自的特性进行显示。2）relativerelative翻译成中文称相对定位，设置了这个属性后，元素会根据top，left，bottom，right进行偏移，关键点是它原本的空间仍然保留（3）absolute元素设置成absolute后会脱离文档流，并且不占有原本的空间，后面的元素会顶替上
复制链接

扫一扫