详解CSS position 属性

CSS3学习笔记 专栏收录该内容
12 篇文章 5 订阅

一、什么是position?

  • position属性指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型。
  • 他有以下5个属性值 分别是:
  • static静态定位
  • absulote绝对定位
  • relative相对定位
  • fixed固定定位
  • sticky粘性定位

在开始讲解之前我们先引入一个css文件,它是预先编译好的css样式,作用是起到一些提示效果

  • 在head标签加入:

    <link rel="stylesheet" href="https://codingstartup.com/assets/css-position/hint.css">
    

二、static 静态定位(默认)

  • HTMl里边所有元素的的position默认值都是static
  • 忽略 top, bottom, left, right 或者 z-index 声明,即不支持属性
    注意: static会跟随HTML的排版(flow移动)
    在这里插入图片描述

三、absolute 绝对定位

  • absolute会固定在所设定的位置,不跟随排版移动

  • absolute如果在子级,那么它会根据父级的absolute和relative定位,但不会根据父级的static来定位
    HTMl+CSS

    <style>
        .height{
            width: 750px;
            height: 120px;
        }
        /* 绝对定位 */
        .absolute{
            position: absolute;
            width: 240px;
            height: 240px;
            right: 80px;
            bottom: 60px;
        }
    </style>
    
    <body>
        <div class="height"></div>
        <div class="absolute"></div>
    </body>
    

    效果:

    在这里插入图片描述

  • 我们多加几个蓝色的div来看看absolute的位置会不会改变

    <body>
        <div class="height"></div>
        <div class="height"></div>
        <div class="height"></div>
        <div class="height"></div>
        <div class="height"></div>
        <div class="height"></div>
        <!-- <div class="static"></div> -->
        <div class="absolute"></div>
    </body>
    

效果:
在这里插入图片描述

  • 可以看到absulote的位置并没有发生改变
  • 但是当页面出现滚动条的时候,它会随着滚动条移动
    在这里插入图片描述

3.1 absulote 嵌套用法 同一个父元素

  • 如果同一个父元素有相同的absulote的话,他们就会重叠
  • 这里为了区分是否重叠,我们把第二个div的right增加l为100
<body>
    <div class="height"></div>
    <div class="absolute"></div>
    <div class="absolute" style="right: 100px;"></div>
</body>

在这里插入图片描述

3.2 absulote 嵌套用法

  • 如果在absulote里边写一个absolute,那么里边的absolute则会依据父元素的absolute来定位。如果父元素没有absolute,那么它会一直找上去,直到找到body
  • 所以里边的div会再向左偏移80px和向上偏移60px,
<body>
    <div class="height"></div>
    <div class="absolute">
        <div class="absolute"></div>
    </div>
</body>

在这里插入图片描述

四、relative 相对定位

重点:在它里边absolute元素根据relative的位置去定位

  • relative与satic很相似,都会跟随HTML的排版(flow)移动, 但是它relative相比static多了leftrighttopbottom,
  • 虽然relative会跟随HTML的排版移动,但是可以通过这四个值来调整位置
    HTML+CSS
    .relative{
            position: relative;
            width: 360px;
            height: 360px;
            top: 60px;
            left: 150px;
    }
    
    <body>
        <div class="height"></div>
        <div class="relative"></div>
    </body>
    
    效果:
    在这里插入图片描述

4.1 relative里边的absolute

  • relative里边的absolute会根据relative来定位

HTML+CSS

/* 绝对定位 */
<style>
	.absolute{
	    position: absolute;
	    width: 240px;
	    height: 240px;
	    right: 80px;
	    bottom: 60px;
	}
	
	/* 相对定位 */
	.relative{
	    position: relative;
	    width: 360px;
	    height: 360px;
	    top: 60px;
	    left: 150px;
	}
</style>

<body>
    <div class="height"></div>
    <div class="height"></div>
    <div class="relative">
        <div class="absolute"></div>
    </div>
</body>

效果:
在这里插入图片描述

五、fixed 固定定位

5.1 会固定到荧幕中的固定位置,即使滚动页面,也不会发生变化

<style>
	.fixed{
	    position: fixed;
	    width: 240px;
	    height: 240px;
	    left: 80px;
	    bottom: 60px;
	}
</style>

<body>
    <div class="height"></div>
    <div class="height"></div>
    <div class="height"></div>
    <div class="height"></div>
    <div class="height"></div>
    <div class="height"></div>
    <div class="height"></div>
    <div class="height"></div>
    <div class="height"></div>
    
    <div class="fixed"></div>
</body>

在这里插入图片描述

5.2 fixed与其他定位的嵌套使用

  • 如果fixed 设定有 left、right、top、bottom属性,即使放在relative与absolute里边,fixed也会根据页面(body)去定位
    如果没有设定它则以文档流方式存在。

  • 没有设定left、right、top、bottom属性
    HTML+CSS

    <style>
    	.relative{
    	    position: relative;
    	    width: 360px;
    	    height: 360px;
    	    top: 60px;
    	    left: 150px;
    	}
    	.fixed{
    	    position: fixed;
    	    width: 240px;
    	    height: 240px;
    	    left: 80px;
    	    bottom: 60px;
    	}
    </style>
    
    <body>
        <div class="height"></div>
        <div class="absolute ">
            <div style="position: fixed;width: 50px;height: 50px;background-color: #000000;"></div>
        </div>
    </body>
    

    效果:
    在这里插入图片描述

  • 设定left、right、top、bottom属性

    <body>
        <div class="height"></div>
        <div class="relative ">
            <div style="position: fixed;width: 50px;height: 50px;background-color: #000000;bottom:100px"></div>
        </div>
    </body>
    

    效果:
    在这里插入图片描述

六、sticky 粘性定位

  • 它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
  • sticky会在滚动的过程当中贴到顶部,原因是我们将它的top设置为0
    在这里插入图片描述
  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页

打赏作者

疯狂的地球人

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值