position定位方式

###### tags: `六角筆記王` `CSS` # position定位方式 > 定位方式很容易搞混，但也蠻常用到的，幫助使用者可以做出複雜的排版 ## :dart:position:static ```css .static { position: static; } ``` - `static` 是position 屬性的預設值。 - 無法定義 top、left、bottom 與 right。如果RWD要調回預設定位可以寫 - 不會被特別定位在頁面上的特定位置，除了`static`其他的屬性值都代表該元素會被定位在頁面上。 ## :dart:position:relative - 稱為相對定位，「相對」原本`static`的位置產生偏移。 - 最主要的功能就是寫在父層，讓子層可以關在裡面。 - `relative` 表現的和 `static` 一樣，除非你增加了一些額外的屬性(top.bottom等)。 - `position: relative` 的元素內設定 `top` 、 `right` 、 `bottom` 和 `left` 屬性，會使其元素「相對地」調整其原本該出現的所在位置 > :exclamation:不管這些「相對定位」過的元素如何在頁面上移動位置或增加了多少空間，都不會影響到原本其他元素所在的位置還是在 `static`的位置。 <iframe height="300" style="width: 100%;" scrolling="no" title="relative" src="https://codepen.io/exnsrpjc/embed/dyRoGyg?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/exnsrpjc/pen/dyRoGyg"> relative</a> by 王聖禮 (<a href="https://codepen.io/exnsrpjc">@exnsrpjc</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> - 想要做出重疊效果，可以寫兩個`relative` ```css .relative1 { position: relative; } .relative2 { position: relative; top: -20px; left: 20px; background-color: white; width: 500px; } ``` ## :dart:position:absolute - 稱為絕對定位，相對父層的「絕對」定位。可以將元素放在父層中任何想放的位置，也可以隨著父層到處放。 - 以上層非 `static`(預設定位)的父元素為定位基準。(重要: 若上層所有父元素都是預設的`static` 定位，則會根據 `body` 定位) - 很神奇的 `position` 屬性值。`absolute` 與 `fixed` 的行為很像，不一樣的地方在於 `absolute` 元素的定位是在他所處上層容器的相對位置。如果套用 `position: absolute` 的元素，其上層容器並沒有「可以被定位」的元素的話，那麼這個元素的定位就是相對於該網頁所有內容（也就是 <body> 元素）最左上角的絕對位置，看起來就是這張網頁的絕對位置一樣，所以當你的畫面在捲動時，該元素還是會隨著頁面捲動(fixed不會跟捲動)。 ## :dart:position:fixed - 稱為固定定位，不會保留它原本在頁面應有的空間，不會跟其他元素的配置互相干擾。 - 最主要功能就是很多廣告或彈出視窗的作法。 - 和 `relative` 一樣，我們會使用 `top` 、 `right` 、 `bottom` 和 `left` 屬性來定位。 - 以目前瀏覽器視窗定位，固定在瀏覽視窗的固定位置，不隨滾動捲軸拉動。 <iframe height="300" style="width: 100%;" scrolling="no" title="absolute＆fixed" src="https://codepen.io/exnsrpjc/embed/dyRoXRJ?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/exnsrpjc/pen/dyRoXRJ"> absolute＆fixed</a> by 王聖禮 (<a href="https://codepen.io/exnsrpjc">@exnsrpjc</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ## :dart:參考資料： [https://zh-tw.learnlayout.com/position.html](https://zh-tw.learnlayout.com/position.html) [https://blog.camel2243.com/2016/11/16/css-position-屬性relative、absolute、static-及-fixed-解析/](https://blog.camel2243.com/2016/11/16/css-position-%E5%B1%AC%E6%80%A7relative%E3%80%81absolute%E3%80%81static-%E5%8F%8A-fixed-%E8%A7%A3%E6%9E%90/)