# position 位置
## 用途
* 將部分html的標籤顯示在最上層，會蓋住下層內容
* 可依需求讓文字圖片等等不隨滑鼠滾輪移動
* 例：我們瀏覽網頁常遇到的廣告，如下圖。
## 語法
1. 設定要懸浮的標籤
* position : static
* 預設值，甚麼都不會變
* position : fixed
* 固定選擇到的標籤(包含該標籤底下的標籤)的位置，使其不隨滑鼠滾輪移動
* 可設定固定在的位置(後面會說明如何設定位置)
* 原本的位置會變成空的後面的標籤會補上來
* position : relative
* 相對自身位置移動
* 會隨滑鼠滾輪移動
* 搭配屬性(top、right、bottom、left)意義與其他position屬性的不同，可按F12觀察各方位position值與fixed的異同
* 為設定距原位置該方位距離有多少
* 例：下方程式碼會讓該容器==向下==位移100px
```css=
position : relative;
top : 100px;
```
* position : absolute
* 屬性同於外層有position:fixed或relative或absolute的標籤
* 移動限制在該外層容器內
* position : sticky
* 兼顧relative和fixed的性質
* top、right、bottom、left至少設置其中一個，表示該方位到視窗的最小距離
* 例：下方程式碼，當該容器距離視窗上方超過200px時不會有效果，但當該容器距離視窗上方要小於200px時會固定在原位置並保持與上方200px的距離
```css=
position : sticky;
top : 200px;
```
2. 調整位置位置
* 觀察有設定position語法的標籤尺寸是不是都多了一個position呢? (按F12找看看)
* 因為該標籤已經獨立了一層，所以position的值分別代表該標籤四個方位到邊界的距離
* top : 設定值
* 設定上position值(加上margin值為與上方邊框的距離)
* right : 設定值
* 設定右position值(加上margin值為與右方邊框的距離)
* bottom : 設定值
* 設定下position值(加上margin值為與下方邊框的距離)
* left : 設定值
* 設定左position值(加上margin值為與左方邊框的距離)
* margin
* 在margin的設定值中可以用auto代替，它會自動計算最大margin值並平分
* 例1：下程式碼可以將該標籤設定為置中
```css=
選擇器 {
position : fixed;
top : 0px;
right : 0px;
bottom : 0px;
left : 0px;
margin : auto;
```
* 例2：下程式碼可以將該標籤設定為左右置中，但上下位置不變
```css=
選擇器 {
position : fixed;
right : 0px;
left : 0px;
margin-left : auto;
margin-right : auto;
```
:::success
想一想原位置在畫面底下(要捲動畫面才看的到)的物件只加上position : fix會發生甚麼事
:::
:::success
想一想為甚麼要用absolute?
可以只用其他三個嗎?
:::
# Project1：導覽列
:::info
為之前的導覽列增添功能，使其在使用者將網頁往下拉的時候不會消失，讓使用導覽列更加便利。
:::
:::spoiler 參考範例
```xml=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: rgb(85, 145, 149);;
}
.top{
background-color: rgb(148, 183, 183);
position:fixed;
right:0px;
left: 0px;
top: 0px;
height: 50px;
}
.link{
text-align: center;
padding: 10px;
}
a{
text-decoration: none;
color: black;
padding-left: 5px;
padding-right: 5px;
font-size: 22px;
}
.content{
margin: 70px auto 30px auto;
line-height: 25px;
width: 95vh;
font-size: 20px;
}
</style>
</head>
<body >
<div class="top">
<div class="link">
<a href="#">首頁</a>
<a href="#">最新消息</a>
<a href="#">修業規定</a>
<a href="#">招生資訊</a>
<a href="#">校內連結</a>
<a href="#">下載專區</a>
</div>
</div>
<div class="box">
<p class="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi obcaecati ad consectetur? Ad magnam eligendi tenetur illo nisi rerum eum minus facilis. Nisi facere nostrum harum ipsa saepe vero reiciendis quos, aliquam nobis adipisci odio delectus ut natus necessitatibus consectetur hic autem eum cum nesciunt omnis fugit deserunt magnam aliquid! Labore distinctio maiores natus quam, deleniti voluptates officiis nam error quas eaque quae ad, ex aliquam quos iusto debitis explicabo omnis sed quibusdam nihil reprehenderit similique repellat repudiandae perferendis. Assumenda rem doloremque et corporis veniam adipisci odio alias minus ut fuga enim unde accusamus cupiditate dolore, nulla vitae voluptatibus inventore magni animi esse laudantium molestias nihil nostrum sed. Consectetur fugit numquam enim doloremque sequi iusto saepe aut. Iste veritatis voluptatum facere nesciunt nam! Officiis magni beatae quis sit sed ex facilis necessitatibus voluptates iusto! Aliquam cum quos libero, ea adipisci ipsa nemo animi velit sed optio illum iste eos, autem enim doloribus fuga temporibus perferendis numquam corporis odit possimus incidunt sint. Incidunt sequi temporibus debitis nihil itaque, repellat tenetur unde provident eligendi adipisci dignissimos aliquam minima ea alias impedit quod necessitatibus nemo! Ipsam totam necessitatibus illum, doloremque inventore, reiciendis quasi rerum quidem, sit natus cum repudiandae fugiat? Alias exercitationem id saepe quidem, deserunt velit commodi ad, obcaecati labore explicabo odio odit tempore omnis sit blanditiis quis iste ducimus expedita sapiente illum iure ab animi. Rerum est corporis enim molestias assumenda laudantium quis facilis, nobis incidunt placeat aliquid unde odio ipsum ullam maiores error provident. Ipsa consequatur veritatis ut inventore ratione deserunt minima pariatur, eveniet suscipit sint dignissimos mollitia rem perspiciatis. Provident facere esse numquam iusto cumque distinctio temporibus aut optio doloremque, sapiente, minus eius amet est laboriosam ratione dolores. Iure totam quas eum atque repellat quibusdam dignissimos ut, impedit quo officiis cumque dolorum natus ab reprehenderit illo quasi explicabo debitis nostrum aliquam pariatur fugiat. Magni deserunt eius laboriosam, eveniet nulla debitis enim! Alias dolores assumenda quo eius quia possimus deleniti id numquam quaerat iure perspiciatis, minima ducimus delectus architecto quidem nisi, adipisci consectetur rerum saepe? In nam facilis quisquam alias porro laborum incidunt ipsum molestias vitae, iure praesentium minima vel molestiae voluptatibus. Eum quo obcaecati atque excepturi nihil sit fugiat eligendi repellat consectetur voluptatibus, eveniet architecto vitae, laudantium illo sequi a iure ullam adipisci beatae ducimus quaerat. In vel consectetur quis velit, doloribus nostrum architecto, est ullam numquam temporibus deserunt autem maiores quaerat error a alias atque dolor similique magnam optio? Quos architecto fuga numquam dignissimos, similique excepturi accusantium esse quasi, doloremque, inventore obcaecati sed. Saepe recusandae fugiat nesciunt! Nihil maiores quae facilis praesentium esse vel, dolorum itaque sit ipsam ea repellat id tenetur temporibus error magnam earum. Ipsum accusantium non aperiam aliquid corporis quas iusto eaque in hic consequuntur. Obcaecati quisquam, dolorem ex modi vitae placeat ut saepe doloremque pariatur similique debitis tempore quaerat necessitatibus accusantium molestias commodi! Blanditiis itaque deleniti incidunt ad rem ab quam ipsum dolore quo, architecto ut voluptates provident quae doloribus ratione aliquam tempore, voluptatibus maxime voluptate? Aut ipsa voluptas asperiores quae excepturi reprehenderit aspernatur voluptatum placeat consequuntur similique cum adipisci, deserunt dolor, eos explicabo quis blanditiis! Impedit doloribus pariatur incidunt mollitia neque dolores suscipit, odio modi cupiditate voluptatibus reprehenderit vel autem enim quam ut eos error nemo? Perspiciatis cum autem vel praesentium sint. Aut eaque accusantium quibusdam quasi omnis tempora, quas iste quod eos incidunt possimus molestiae aperiam blanditiis fugit dicta harum esse illum aliquid? Ex, deserunt? Vero soluta accusantium accusamus dolores sit reiciendis at beatae. Est pariatur debitis temporibus in cumque. Necessitatibus nostrum dicta sint fugit nulla ipsam quaerat neque, soluta, molestiae qui vero ipsum molestias, laudantium accusamus illo velit dolor doloribus consectetur. Deserunt perferendis hic nostrum natus, ipsum enim quae impedit ut, illo in pariatur optio incidunt dolorem repellat! Ea, obcaecati! Tempora voluptatibus cum nisi eligendi, nam dolores sunt corrupti voluptas velit dicta obcaecati minima magni ex ducimus molestias nostrum cumque natus! Quibusdam quia deleniti dicta unde neque alias aliquid soluta porro pariatur, dolor dignissimos odit molestias deserunt asperiores labore blanditiis possimus hic cupiditate voluptas, minus mollitia. Deleniti corrupti tempora voluptatum molestiae animi inventore, fuga consequatur! Adipisci dolorum iusto atque, odio facere dolor sit tempore hic aperiam dicta aut ducimus enim minus! Est, amet! Esse nihil magnam libero ratione nostrum quidem sequi illum temporibus nobis, eligendi optio cupiditate iusto iste aperiam perferendis praesentium! Commodi perferendis et rem laudantium dolorem alias, quaerat ea porro quas nobis fugiat nam doloremque velit ipsam labore architecto, deleniti dignissimos aliquid assumenda? Commodi, beatae ratione? Inventore, delectus nobis quo aut, alias asperiores quasi aperiam ullam obcaecati officiis quidem recusandae necessitatibus illum nulla voluptates, quae animi? Nulla veritatis obcaecati et repudiandae dolor dignissimos distinctio nihil adipisci accusantium maxime, recusandae modi tenetur eum dolore dolores ullam! Officiis earum quisquam recusandae molestias eum mollitia in atque autem consequatur tempora inventore aperiam, unde, delectus quasi architecto nobis. Fugit rerum maiores hic itaque? Aut quas harum corrupti temporibus nihil ea ducimus eum autem molestias voluptate, saepe, odio quae ab suscipit nisi facere amet neque consequatur magni dolorum! Ratione, esse illo! Deleniti dolorum adipisci itaque reprehenderit dolore quasi optio voluptatibus repudiandae, sed in nam earum ipsum cum id. Cum ut consequuntur fugiat ea placeat provident voluptas ad esse neque dignissimos, libero rerum repellendus natus atque ab quidem veritatis tempora, suscipit modi magnam eos aliquid repellat numquam? Optio officia quibusdam magnam doloribus provident cupiditate ipsa, repellat facilis quo laborum omnis sint asperiores minus nisi, nobis magni aut possimus ab fugiat tempore fugit labore laudantium animi velit! At possimus, explicabo vitae minus ducimus assumenda dolorem voluptatibus porro cumque repudiandae expedita, delectus rem quos, nesciunt quasi vero est reiciendis voluptatem nemo quae autem nobis magnam harum saepe. Aspernatur accusamus laborum atque inventore! Eos rem veniam, consequatur cum, libero, maiores in atque iusto consectetur dolorum tenetur similique quidem adipisci quisquam perferendis magnam. Obcaecati eligendi voluptates, impedit nobis asperiores est adipisci vero nulla hic repudiandae a perferendis minima, explicabo cumque! Harum voluptas corrupti sint. Blanditiis sunt quaerat ducimus voluptas qui esse sequi repellat, itaque repudiandae nesciunt neque asperiores perspiciatis reiciendis, fugit, illo impedit facilis ullam labore totam hic. Quia. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit nemo vitae officia maxime repellendus, ullam vel esse blanditiis quae nostrum et veritatis delectus ratione aut non amet tempora facilis asperiores dicta, obcaecati architecto. Maiores eos animi quo ullam qui reiciendis numquam aut quis atque perferendis, dolores voluptate facilis nemo omnis doloribus dolor esse veniam! Voluptate aut consequatur corrupti amet, sapiente nobis. Veritatis tempore, at eveniet, autem inventore, sit non maxime id expedita placeat cum. Sed esse perspiciatis beatae eaque, repellat earum vitae sit dolores consequuntur! Quisquam, quam eveniet maiores perferendis architecto molestiae nostrum in veritatis excepturi illo hic odio est error assumenda labore nam debitis vel possimus mollitia corrupti vero tenetur facere impedit distinctio. Similique laudantium deserunt vitae impedit ducimus eos incidunt atque dolore nemo eaque. Aliquam sequi consequuntur vitae cum corporis veritatis eos odit excepturi. Iure animi sunt ducimus veritatis fugiat officia illo quod eaque cumque officiis aliquid, dolores quam consectetur doloremque. Officia sint nulla tenetur velit voluptatem. Quaerat eligendi enim harum tempora illo labore? Itaque officiis esse voluptate, doloribus quia repellat. Tenetur neque nostrum saepe nemo corrupti facere ullam at modi totam suscipit! Vel qui, ullam nisi perspiciatis, alias nemo repellendus iusto blanditiis et dicta nesciunt aspernatur exercitationem doloribus assumenda modi architecto iste deleniti voluptate numquam! Totam, voluptatum! Nam, dolore? Natus sed enim quos soluta labore, quod nulla optio architecto. Odio consectetur itaque tenetur sunt eaque dolor animi eius vel corrupti, sed placeat aspernatur repudiandae numquam aliquid quod cumque accusantium consequuntur velit iusto! Totam laudantium provident cum, modi itaque incidunt earum aliquam dolor, harum alias, dignissimos maiores culpa iure quas! Nam incidunt omnis placeat, libero ad a veniam, dolorem vel eum numquam quidem quaerat non. Explicabo delectus laudantium fuga magnam magni sapiente natus. Dignissimos sed error suscipit tenetur dicta quis quidem veritatis minima facilis laudantium quam, ab tempore?</p>
</div>
</body>
</html>
```
:::
# Project 2
:::info
<!-- 製作出個footer(放在最底下的資訊內容)，並且在網頁內容不夠的時候依然能置底。 -->
製作出一個廣告在頁面正中間，並且不隨滾輪滑動
:::
<!--
-->
:::spoiler 參考範例
```xml=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0302-2</title>
<style>
.ad {
background-color: rgb(53, 51, 51);
position:fixed;
width: 30vw;
height: 50vh;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
text-align: center;
}
.ad_text{
color: white;
line-height: 50vh;
margin: auto;
display: inline-block;
font-size: 20px;
}
.picture{
position: absolute;
right: 0px;
top: 0px;
}
.picture:hover{
opacity: 0.7;
}
.text {
width: 90%;
margin: 20px auto;
line-height: 1.5;
font-size: 20px;
}
</style>
</head>
<body>
<div class="ad">
<span class="ad_text">這是一個討厭的廣告</span>
<img class="picture" src="https://cdn.discordapp.com/attachments/1096482296942563338/1099215784267497532/close.png" alt="close">
</div>
<p class="text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, ame Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur commodi, dicta iure eum officia possimus sequi quia est quos nemo quam dignissimos suLorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, ame Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur commodi, dicta iure eum officia possimus sequi quia est quos nemo quam dignissimos sunt perferendis ad quas expedita earum inventore sapiente. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eos sed alias facilis repellendus eaque perferendis fugiat voluptate non? Ab suscipit excepturi neque ducimus amet magnam cumque beatae. Praesentium repellat beatae natus consequatur hic, blanditiis facilis sequi quam iure ratione corrupti rem accusantium dolore autem quas, rerum quod saepe maiores. Doloremque labore mollitia, cupiditate quasi quas expedita rerum soluta sit nemo modi recusandae delectus eaque, quibusdam natus ratione amet et fugit, dolorum temporibus. Laboriosam iste esse dicta, voluptas quam autem sequi officia optio provident nulla neque aperiam praesentium fugiat at, minima hic ea obcaecum inventore sapiente. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eos sed alias facilis repellendus eaque perferendis fugiat voluptate non? Ab suscipit excepturi neque ducimus amet magning elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis ullam voluptas adipisci magni est reiciendis fuga impedit facere illo maxime, provident et, quae eos a sapiente odit pariatur tenetur? Non.
</p>
</body>
</html>
```
:::
# 問題集
### 為什麼設了position之後完全不會置中？
:::info
欸欸，為什麼我的廣告區塊用position置中之後不是我想像的樣子？
我明明已經把`top`, `bottom`, `right`, `left`都設定為0了，而且`margin`也設定成`auto`，到底為什麼？
:::
請參考以下範例：
```htmlembedded!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
body, html{
width: 100%;
height: 100%;
}
.ad{
background-color: #aaa;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="ad">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, mollitia...
</div>
</body>
</html>
```
:::warning
你必須要給你的廣告區塊設定`width`跟`height`，否則：
* 因為你設定了`top`, `bottom`, `right`, `left`為0，但是`ad`又沒有事先設定寬度，所以你的ad會自己往外擴張，變得與視窗上下左右的距離都是0。
* 因為廣告區塊已經占滿了整個螢幕，所以你設定`margin：auto`沒有用，因為沒有剩餘的空間可以分配給`margin`。
:::
下次不能置中的時候，不妨檢查一下你要設定的標籤有沒有設定寬高吧！
<!-- ### 文字要怎麼置中
:::info
上次有同學反應，我廣告裡面的文字要怎麼置中？於是有同學就這麼做：
* 寫一個`class="ad"`的標籤，作為廣告區域，設定`position：fixed`，並且用前面介紹過的設定進行置中。
* 再寫一個`class="content"`的標籤，作為廣告中的文字區域，設定`position：absolute`，將其置中，並設定寬高為100px。
:::
參考以下範例：
```htmlembedded!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
body, html{
width: 100%;
height: 100%;
}
.ad{
background-color: #aaa;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
width: 400px;
height: 300px;
}
.content{
position: absolute;
width: 100px;
height: 100px;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="ad">
<p class="content">Lorem ipsum dolor...</p>
</div>
</body>
</html>
```
:::info
"ㄟ老師，我的文字看起來好像還沒置中......"
你知道問題究竟在哪裡嗎？讓我們按F12檢查
:::
下圖藍色區域是文字標籤的內容，可以看到文字並沒有在這個區塊中置中。
底下給大家一些範例當作參考，讓文字在標籤裡面垂直置中。 -->
Sign in with Wallet
Connect another wallet