Day17 CSS位置position介绍
今天我们要介绍的是CSS重要属性position，在排版中我们会遇到许多不同的情况，而利用position可以帮助我们解决这些问题。接下来就让我们了解position可以设定哪些属性吧!
position: static | relative | fixed | absolute
position: static; 预设
当div方框设定成static时。代表是预设值，会造着浏览器的配置自动排版在网页上，所以top、bottom、left、right 设定没有意义。
<style>
.static{
border: 5px solid blue;
width: auto;
height: 200px;
}
</style>
<body>
<div class="static">
<p>预设值，设定top、left、button、right都没有用</p>
</div>
</body>
position: relative; 相对位置
当div方框设定成relative时，如果没有添加top、left、button、right等其他属性时，就会像static一样在原本的浏览器设置的位置，不过设定了以後就可以从原本的位置做移动调整。基准是以原本设定的位置。
.static{
position: static;
border: 5px solid blue;
width: 800px;
height: 100px;
}
.relative{
position: relative;
border: 5px solid yellow;
width: 500px;
height: 200px;
}
<body>
<div class="static">
<p style="font-size: 20px;">预设值，设定top、left、button、right都没有用</p>
</div>
<div class="relative">
<p>相对位置</p>
</div>
</body>
这是还没有设定top、left、button、right时，就在预设的位置。
而在.relative内加上top跟left的位移後，就会从原本位置移动到相对位置。
.relative{
position: relative;
border: 5px solid yellow;
width: 500px;
height: 200px;
top: 20px;
left: 100px;
}
position:fixed; 固定定位
固定定位会将div方框固定在浏览器视窗的位置，不论页面怎麽滚动，他都还是会在同个位置，页面下拉时也不会消失。且不受其他定位的影响。
.static{
position: static;
border: 5px solid blue;
width: 800px;
height: 100px;
}
.relative{
position: relative;
border: 5px solid yellow;
width: 500px;
height: 200px;
top: 20px;
left: 100px;
}
.fixed{
position: fixed;
width: 300px;
height: 150px;
border: 5px solid violet ;
top: 0;
right: 0;
}
<body>
<div class="static">
<p style="font-size: 20px;">预设值，设定top、left、button、right都没有用</p>
</div>
<div class="relative">
<p>相对位置</p>
</div>
<div class="fixed">
<p>固定位置</p>
</div>
</body>
position:absolute; 绝对位置
绝对位置absolute需要有relative来搭配，可以想像需要有个爸爸(relative)包住儿子(absolute)，若是外层没有包住的话，就会以body为基准调整定位，而一开始都是定位在左上角。不太理解的话让我们看看下面这张图。
.static{
position: static;
border: 5px solid blue;
width: 800px;
height: 100px;
}
.relative{
position: relative;
border: 5px solid yellow;
width: 500px;
height: 200px;
left: 100px;
}
.fixed{
position: fixed;
width: 300px;
height: 150px;
border: 5px solid violet ;
right: 0;
top: 0;
}
.absolute{
position: absolute;
border: 5px solid green;
width: 50px;
height: 50px;
top: 20px;
}
.test{
position: relative;
width: 300px;
height: 200px;
border: 5px solid grey;
}
<body>
<div class="static">
<p style="font-size: 20px;">预设值，设定top、left、button、right都没有用</p>
</div>
<div class="relative">
<p>相对位置</p>
</div>
<div class="fixed">
<p>固定位置</p>
</div>
<div class="test">
<div class="absolute">
<p>绝对位置</p>
</div>
</div>
</body>
绝对定位会定位在相对定位的左上角，而也可以调整他的位置。
.absolute{
position: absolute;
border: 5px solid green;
width: 50px;
height: 50px;
top: 40px;
left: 20px;
}
在absolute里加上top: 40px; left: 20px;
就会以爸爸(relative)为基准点(左上角)去做移动。
今天的介绍就到这了，对CSS的排版位置理解了吗!
<<: 追求JS小姊姊系列 Day16 -- 方函式的能力展现：有小弟真好 -- 函式参数
>>: 【Day 16】Google Apps Script - API 篇 - Document Service - 文件服务范例-读取表格
Day 20 - 重新检视 mAP, F1, IoU, Precision-Recall 精准度
Day 20 - 重新检视 mAP, F1, IoU, Precision-Recall 精准度 A...
Day 16 读 Go Concurrency Patterns - Rob Pike III
续上篇 Day 15 读 Go Concurrency Patterns - Rob Pike II...
Day 2 - Home Lab 事前准备 - 安装篇
在 Day 1 时，我们有稍微提到了 Home Lab 可以使用一般的桌上型电脑来建置，那今天我们要...
【ACL成功案例】欧洲金融科技领导者Ebury 公司宣布采用Diligent勤奋集团所属Galvanize(ACL原厂)解决方案，协助公司提高营运绩效，建立以资料分析为导向，卓越具洞察远见的优秀组织~
Ebury 於 2009 年在伦敦成立，现已成为欧洲规模最大、资金最雄厚的金融科技公司之一，在全球 ...
[Day17] swift & kotlin 实作篇！(8) Animation - swift
swift 画面有了～功能也有了~ 接下来我们做个小动画 我们试着让小鸡在画面中跳起来 整个APP ...