每次要用到绝对定位和相对定位时,我都会忘记他们分别代表的是什麽,又再google一次,这次决定好好把概念整理清楚,希望不要再混淆啦~
每个HTML元素预设的属性,元素会照着浏览器预设的配置自动排版在页面。
例如:
如果没去设定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;
}
将某个区块设定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;
}
position: fixed 和没有指定基准元素(position:relative)的position:absolute一样,是以浏览器为基准元素来移动位置。 不同的是,position:fixed会让有设定的区块在拉动卷轴之後,显示在固定位置上。
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元素之间的图层位置
预设位置属性(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服务可以去建置部...
昨天我们完成了虚拟环境安装,而为了让後续的挑战更具连贯性,对於後面几个主题的顺序有稍作挑整,故从今天...
先写时间轮播的部分 一样先做一个data预设 data: { time: [0, 3, 4, 2, ...
Who am I ? 大家好! 我是阿瑜。我是We+的团长。 从第11届铁人赛开始加入iT铁人的行列...
Federated plugins (联合插件) 是一种将对不同平台的支援功能分为单独的软件包。所以...