天天看点
返回

详解CSS position 属性一、什么是position?二、static 静态定位(默认)三、absolute 绝对定位四、relative 相对定位五、fixed 固定定位六、sticky 粘性定位

文章目录

  • 一、什么是position?
  • 二、static 静态定位(默认)
  • 三、absolute 绝对定位
    • 3.1 absulote 嵌套用法 同一个父元素
    • 3.2 absulote 嵌套用法
  • 四、relative 相对定位
    • 4.1 relative里边的absolute
  • 五、fixed 固定定位
    • 5.1 会固定到荧幕中的固定位置，即使滚动页面，也不会发生变化
    • 5.2 fixed与其他定位的嵌套使用
  • 六、sticky 粘性定位

一、什么是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移动）

    详解CSS position 属性一、什么是position?二、static 静态定位(默认)三、absolute 绝对定位四、relative 相对定位五、fixed 固定定位六、sticky 粘性定位

三、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>
    效果:
    详解CSS position 属性一、什么是position?二、static 静态定位(默认)三、absolute 绝对定位四、relative 相对定位五、fixed 固定定位六、sticky 粘性定位
  • 我们多加几个蓝色的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>

效果：

详解CSS position 属性一、什么是position?二、static 静态定位(默认)三、absolute 绝对定位四、relative 相对定位五、fixed 固定定位六、sticky 粘性定位
  • 可以看到absulote的位置并没有发生改变
  • 但是当页面出现滚动条的时候，它会随着滚动条移动
    详解CSS position 属性一、什么是position?二、static 静态定位(默认)三、absolute 绝对定位四、relative 相对定位五、fixed 固定定位六、sticky 粘性定位

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>
详解CSS position 属性一、什么是position?二、static 静态定位(默认)三、absolute 绝对定位四、relative 相对定位五、fixed 固定定位六、sticky 粘性定位

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>
详解CSS position 属性一、什么是position?二、static 静态定位(默认)三、absolute 绝对定位四、relative 相对定位五、fixed 固定定位六、sticky 粘性定位

四、relative 相对定位

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

  • relative与satic很相似，都会跟随HTML的排版(flow)移动， 但是它relative相比static多了left、right、top、bottom,

  • 虽然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>
    效果:
    详解CSS position 属性一、什么是position?二、static 静态定位(默认)三、absolute 绝对定位四、relative 相对定位五、fixed 固定定位六、sticky 粘性定位

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>

效果：

详解CSS position 属性一、什么是position?二、static 静态定位(默认)三、absolute 绝对定位四、relative 相对定位五、fixed 固定定位六、sticky 粘性定位

五、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>
详解CSS position 属性一、什么是position?二、static 静态定位(默认)三、absolute 绝对定位四、relative 相对定位五、fixed 固定定位六、sticky 粘性定位

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>
    效果:
    详解CSS position 属性一、什么是position?二、static 静态定位(默认)三、absolute 绝对定位四、relative 相对定位五、fixed 固定定位六、sticky 粘性定位
  • 设定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>
    效果:
    详解CSS position 属性一、什么是position?二、static 静态定位(默认)三、absolute 绝对定位四、relative 相对定位五、fixed 固定定位六、sticky 粘性定位

六、sticky 粘性定位

  • 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
  • sticky会在滚动的过程当中贴到顶部，原因是我们将它的top设置为0
    详解CSS position 属性一、什么是position?二、static 静态定位(默认)三、absolute 绝对定位四、relative 相对定位五、fixed 固定定位六、sticky 粘性定位
css3学习笔记 css 定位
上一篇: 03_java核心类库_XML与JSONXMLJSON：重点
下一篇: 页面布局须知重点记，元素的布局定位模式 position 属性

继续阅读