在排版方面还有一个很重要的属性，其实前面的范例多少能见到它的身影，今天我们就来深入的认识它吧！<position>是一个用於定位元素的属性，在CSS中绝对是不可缺少的一部分，它分为几种不同的类型：
<static>
<static>是一个预设值，没有以任何特殊方式定位的元素，会照着浏览器预设的配置自动排版在页面上，如果 position 的值是被设定为<statics>的话，那 top、bottom、left、 right 的值就都没有意义了喔！
.div {
position: static;
}
<relative>
<relative>是相对於原本的位置再进行定位，元素内设定位置属性 top 、 right 、 bottom 、 left ，会使其元素「相对地」调整位置，这个调整不会影醒到其他元素的位置。
.div {
position: relative;
left: 20px;
top: 20px;
}
<fixed>
<fixed>会相对於浏览器视窗来定位，所以网站卷动时元素不会跟着移动，<fixed>元素不会保留它原本在页面应有的空间，不会跟其他元素的配置互相干扰，常见的就是导览列的部分可以用<fixed>来做定位，这样网站往下滑的时候还是可以看到最上排的导览列喔！
.div {
position: fixed;
bottom: 0;
right: 0;
}
<absolute>
<absolute>的定位方式是往上层容器去找定位，再依据上层容器去移动到相对位置，<absolute> 元素对其它元素的布局没有影响，可以将元素放在版面的任何地方，要注意的是如果没有可以被定位的上层容器的话（<position:static>不算是可以被定位的元素喔！），就会找到<body>去做定位，并随着页面滚动而移动。
.div { /＊添加可定位元素＊/
position: relative;
width: 600px;
height: 600px;
}
.div2 {
position: absolute;/＊往上层找＊/
top: 0;
right: 0;
width: 100px;
height: 100px;
}
<sticky>
<sticky>属性是相对定位和固定定位的混合体，元素开始先视为相对定位，直到它超过指定的值，就会被视为固定定位。
.div {
position: -webkit-sticky; /* Safari浏览器 */
position: sticky;
top: 0;/＊指定值＊/
}
<position>属性虽然有些复杂，但它是做出一个良好的版面配置的必备的知识喔，大家可以多练习看看！
<<: 冒险村23 - Design Pattern(3) - Builder
图 21-1: 付款方式列表 我们已经建立了继承 WC_Payment_Gateway 的的 WC...
由於 UI Flow 一定程度上已经交代了操作流程会走过哪些页面，接下来设计师就可以根据 UI F...
在建立好帐号之後，我们可以开始来看看 Line bot SDK，可以从 Line developer...
第七天～ 我们昨天写了个 Hello World 出来， 但是这只是单单把字给秀出来而已， 假如我们...
The Flyweight design pattern uses sharing to suppo...