Day12 经常搞混的CSS Position

每次要用到绝对定位和相对定位时,我都会忘记他们分别代表的是什麽,又再google一次,这次决定好好把概念整理清楚,希望不要再混淆啦~

CSS Position属性有哪些?

  • position: static;
  • position: relative;
  • position: absolute;
  • position: fixed;
  • position: sticky;

1. position: static; 预设位置

每个HTML元素预设的属性,元素会照着浏览器预设的配置自动排版在页面。
例如:

2. position: relative; 相对位置

如果没去设定top、botton、left、right等移动方向的话,和position:static;是一样的,元素会照着浏览器预设 配置排列。
例如:

 <div class="container">
     <div class="box">ONE</div>
     <div class="box1">TWO</div>
     <div class="box2">THREE</div>
 </div>
.container{
width:200px;
height:400px;
background-color:pink;
}

.box {
	position:relative;
	width:100px;
	height:100px;
	background-color:violet;
	
 }
 
.box1 {
	width:100px;
	height:100px;
	background: skyblue;
	
 }

.box2{
	width:100px;
	height:100px;
	background-color: lemonchiffon;
	
}

如果有设定top、botton、left、right等移动方向的话,position: relative 会以自己的位置做为基准来移动,且原来的空间会被保留下来,所以其他排列的元素会维持在原来的位置上。
例如:

.box {
	position:relative;
	left:110px;
	width:100px;
	height:100px;
	background-color:violet;
	
 }

3. position: absolute 绝对定位

将某个区块设定position: absolute 之後,这个区块会脱离原本预设的版面配置,预设是以浏览器为基准来排列。
和position:relative不同,设定了absolute的区块空间不会保留,所以若有其他的元素会自动补上。

例如:

.container{
width:200px;
height:400px;
background-color:pink;
}

.box {
	position:absolute;
	width:100px;
	height:100px;
	background-color:violet;
 }
 
.box1 {
	width:150px;
	height:150px;
	background: skyblue;
	text-align: right;
 }

.box2{
	width:100px;
	height:100px;
	background-color: lemonchiffon;
	
}

可以看到蓝色的区块递补上去

.container{
width:200px;
height:400px;
background-color:pink;
margin:0 auto;
}

.box {
	position:absolute;
	left: 50px;
	width:100px;
	height:100px;
	background-color:violet;
 }
 
.box1 {
	width:100px;
	height:100px;
	background: skyblue;
 }

.box2{
	width:100px;
	height:100px;
	background-color: lemonchiffon;
	
}

可以看到紫色区块脱离了粉红色区块的容器
因为没有指定基准元素,所以会以浏览器为基准位置来移动

如果指定基准元素(有设定position:relative;的元素),就会以基准元素作为起点来移动位置。

例如:
把黄色的区块设定成基准位置
因为紫色区块移动了,蓝色的区块就递补上去

.container{
width:200px;
height:400px;
background-color:pink;
}

.box {
	position:absolute;
	left:50px;
	top:50px;
	width:100px;
	height:100px;
	background-color:violet;
 }
 
.box1 {
	width:100px;
	height:100px;
	background: skyblue;
 }

.box2{
	position: relative;
	width:100px;
	height:100px;
	background-color: lemonchiffon;
	
}

4. position:fixed

position: fixed 和没有指定基准元素(position:relative)的position:absolute一样,是以浏览器为基准元素来移动位置。 不同的是,position:fixed会让有设定的区块在拉动卷轴之後,显示在固定位置上。

5. position:sticky

position:sticky; 是 relative 及 fixed 两种 position 的综合
预设情况下,元素的设定和 position: relative一样,卷动页面时元素会跟着父元素一起卷动,但是当元素与视窗的距离小於指定数值时,元素则会转换为 position: fixed;,固定黏在( sticky )指定的数值上,距离不会再缩小。

例如:

 <div class="container">
    <p>container</p>
    <div class="box">ONE</div>
    <div class="box1">TWO</div>
    <div class="box2">THREE</div>
</div> 

.container{
width:200px;
height:200vh;
background-color:pink;
position:relative;
}

.box {
	position:sticky;
	top:0;
	width:100px;
	height:100px;
	background-color:violet;
 }
 
.box1 {
	width:100px;
	height:100px;
	background: skyblue;
 }

.box2{
	width:100px;
	height:100px;
	background-color: lemonchiffon;	
}

一开始的预设位置

当拉动卷轴时,紫色区块碰到top:0;的位置时,就固定在同个位置

相关资料:stick positioning
参考资料: Learn CSS Position In 9 Minutes


除了使用position属性之外,z-index属性也很常和position属性一起搭配使用来改变HTML元素之间的图层位置

z-index

预设位置属性(position:static;)搭配z-index使用会没有效果

z-index:number; 根据设定的数字大小决定堆叠的顺序,数字越大代表权重越高越上层。

例如:

.container{
 width:200px;
 height:200px;
 background-color:pink;
 position:relative;
}

.box {
	position:absolute;
	right:60px;
	bottom:30px;
	width:100px;
	height:100px;
	background-color:violet;
    z-index:5;	
  }
  
.box1 {
	position:absolute;
	right:-20px;
	bottom:-30px; 
	width:100px;
	height:100px;
	background: skyblue;
	z-index: 2;
	
  }

.box2{
	width:100px;
	height:100px;
	background-color: lemonchiffon;	
}

还没设定z-index之前,蓝色区块会盖掉部分的紫色区块

在设定z-index之後,紫色区块被提高一层,盖掉了部分蓝色区块

参考资料:z-index

以上为个人学习笔记整理
若有错误,欢迎指正


<<:  Chapter1-DJ最爱的音频动感图像(IV)让音乐动起来!开篇基础设定和动画框架

>>:  Day12 - 敏捷式接案实践( 四 ) - 收入管理

人生的十字路口,选择自己想走的路

了解各个工具的特性,并相互运用 讲完EC2的架构图以及介绍後,首先会介绍有哪些AWS服务可以去建置部...

Day09 - 网站开发从Django开始

昨天我们完成了虚拟环境安装,而为了让後续的挑战更具连贯性,对於後面几个主题的顺序有稍作挑整,故从今天...

Day15-旧网站重写成Vue_6_多图片轮播

先写时间轮播的部分 一样先做一个data预设 data: { time: [0, 3, 4, 2, ...

Day 1: Let's start !

Who am I ? 大家好! 我是阿瑜。我是We+的团长。 从第11届铁人赛开始加入iT铁人的行列...

Day03 Federated plugins (联合插件)

Federated plugins (联合插件) 是一种将对不同平台的支援功能分为单独的软件包。所以...