金魚都能懂網頁設計入門 : Absolute 絕對定位教學 - 鐵人賽第十六天 | CSS教學 | 網頁教學
HTML-код
- Опубликовано: 21 окт 2024
- 網頁教學如此淺顯易懂，就是金魚都能懂的網頁設計入門啦
定位! 這個新手常踩的雷區，今天就跟著Amos 來了解一下 absolute定位吧，歡迎各位把您的心得留在下方留言區一起跟Amos分享喔。
歡迎Line搜尋『@CSScoke』加入Amos公開帳號
#CSS教學 #網頁教學 #網頁設計 #CSScoke
本影片同步發表於 2019 iT 邦幫忙鐵人賽
ithelp.ithome....
Line搜尋「@csscoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
👍若你喜歡我的影片，歡迎利用下方任一方式斗內支持我，謝謝您
💰打賞 AMOS 喝杯咖啡
❤️街口支付 901377766
❤️綠界 p.ecpay.com.tw...
❤️歐付寶 tinyurl.com/am...
完整版30集 - 金魚都能懂網頁設計入門
• 金魚都能懂的網頁設計入門
阿莫師の網頁料理室
• 阿莫斯の網頁料理室
大師常來聊
• 大師常來聊
超入門 - 金魚都能懂的網頁教學(2HR)
• 超入門 - 金魚都能懂的HTML教學-Par...
Bootstrap3 CSS原始碼導讀
• Bootstrap
背景圖片來源
unsplash.com/p...
■□■□■□■□■□■□■□■□■□■□■□■■□■□■□■■□■□■□■□■□■□■□■□■
每周二晚上直播 / csscoke
■□■□■□■□■□■□■□■□■□■□■□■■□■□■□■■□■□■□■□■□■□■□■□■
訂閲看最新影片 goo.gl/nXQfZG
■□■□■□■□■□■□■□■□■□■□■□■■□■□■□■■□■□■□■□■□■□■□■□■
複習
絕對定位特性
1.與fixed不同，fixed是永遠固定在瀏覽器視窗中，但是 Absolute 絕對定位只定1次。
2.會往父層，一層一層往上找定位，如果某個父層已經有定位，例如fixed, relective, absolute三個中的一種，就會跟著定在父層上。
3.自己獨立一層
絕對定位通常使用的時機
1.某個東西不需要跟其他東西一起排列的時候
推 透徹原理 真正的會 這支技術影片直截了當地呈現操作步驟，令人留連忘返！製作者不僅深入淺出地解說，更實際示範每個步驟，讓觀眾能夠一目瞭然、融會貫通。這樣的教學風格非常實用，不僅節省觀眾的學習時間，也讓我們能夠迅速掌握技術的精髓。簡直是一堂直擊要點的實用教學，十分感激製作者的用心呈現
13:08 請問如何 同時在一樣的class 新增一樣的內容?
很喜歡Amos的教法，觀念很清楚，還有實用在哪裡，每次聽完概念後，自己試著不看程式碼獨立重作，鐵人賽系列也滿適合像我已自學上完基礎html/css，作重點總複習
Amos 請問你之前用來量元素 px尺是怎麼用出來的
看這裡有提到
ruclips.net/user/livezQMG3xm7nEg?si=yDjJeP6s4fyQh_zC&t=3702
老師，
如果父層a是fixed, 那子層b和子子層c，都是fixed嗎？
position的默認預設值是static，應該是不會繼承
真的太猛了....，買了付費課程都沒有金魚講得那麼深又詳細....
還有更深的內容，但是在我的付費課程內，歡迎加入我的Line 生活圈好接收課程資訊喔
Line 搜尋 「@CSScoke」就能找到我的Line 生活圈囉
Amos老師我想請問～如果我想把hot放在圖片左上角，而不是整個框框的左上角，就應該讓tab抓到的父元素是img對嗎？但img是自閉標籤，應該沒辦法把tab包起來，所以我是不是只能再開一個div把img和tab包在一起，再讓tab去抓這個div做絕對定位？
或是可以按照item的padding去設定left和top的值 這樣對嗎
真是位口條很清楚的老師,這必須對每個功能都掌握得很清楚才能這麼行雲流水阿~~
超級清楚，謝謝老師!
請問關於2:55這裡c已經被設為absolute，自己獨立一層，
那c是依據什麼停在b右下的位置?不是應該在視窗的左上角嗎?
小弟是學CSS的新手，實在想不明白，希望解答，謝謝
在沒有設定top/right/bottom/left之前，絕對訂位物件會停留在他原本資料所在位置，以C的左上角為基準點的話，他會是在b這個文字的下緣
@@CSScoke 原來還沒設定top/right/bottom/left時會有這個特性，謝謝！
===修正===
一標籤在設定"position: absolute;"後, 若其上所有parent的皆"無"設定position, 該標籤將以起始的視窗範圍為定位點, 作移動後就停在該處不動;
設定"position: fixed;"則為依視窗重新捲動後的頁面為定位點作移動
===原===
Amos師您好：
一標籤在設定"position: absolute;"後, 若其上所有parent的皆"無"設定position, 該標籤將依視窗的啟始畫面作移動後就停在該處;
設定"position: fixed;"則為依視窗重新捲動後的頁面作移動
請問我從影集中對fixed和absolute兩值的了解正確嗎？謝謝
absolute中【視窗的起始畫面】這定義應該是沒錯，但我會修改一下說法為【起始的視窗範圍】，因為他不單單是畫面，我也可以在畫面外，看你的上右下左怎麼定，所以重點其實在於 absolute 最終是以視窗【範圍】作為【定位點】
@@CSScoke 感謝您詳細的解說，謝謝！
最近在練習用css做navbar，用1個裡面多個選項 (都設為relative定位)，然後各自又包含一個子選單(設為absolute)
當那些子選單的top, left設為0，顯示正常，都各自靠著 "所屬的" 上層li左上方對齊；但如果子選單沒有明確指定top, left為0，則所有子選單都在上層的 "第一個" 對齊，全部重疊在一起，請問為什麼會這樣呢？
依據你描述的狀況，不太可能會出現你說的「但如果子選單沒有明確指定top, left為0，則所有子選單都在上層的 "第一個" 對齊，全部重疊在一起」這種狀況，絕對定位的相依性很明確，他會檢查你父層的定位設定，所以依據你說明的狀況，一種是你少敘述了一些CSS設定，一種則是你的HTML結構是否出了問題?
或許你可以嘗試著把你的原始碼放到 jsfiddle.net/ 存檔後，把網址丟上來給我看，不然這樣很難抓到你的問題點喔。
@@CSScoke 我這樣寫有什麼不妥的地方嗎？很奇怪怎麼會有這樣現象 ~ 不好意思你還沒回我就這樣追問，因為太想知道XD
@@heyyohihat .menu-item {
list-style: none;
display: inline;
position: relative;
}
display: inline; 這一行造成的
因為他是inline物件，無法給block物件定位
你可以改成 display: inline-block; 就搞定了
@@CSScoke 原來inline不能給block定位，長知識了，幫大忙啊!
@@CSScoke 對了還有一點，我會用具有inline特性的display時機，是在希望某個區域內的元素「一個緊接下一個排下去 (這叫 "流" 特性嗎XD)」可是這樣看起來，怎麼好像「inline-block比inline好」吼？？因為inline-block可以自行決定width和height之外，還能當定位基準parent →→想請問amos，有沒有那種「應該使用inline而不要使用inline-block」的時機呢？
老師 您好:想請問我試著完成稀飯排版後在product的地方加上.tab 定位於圖片(:position:relative),但如果定位於圖片上tab會抓到html as父層, 如果往.product .item定relative又會把原本設定的圖片及文字50%吃掉(變成文字蓋到圖片).....請問我是哪裡出問題了嗎?
Document
.header{
display:flex;
background-color: black;
padding:6px 0;
}
.header .logo{
display:inline-block;
padding:6px 0;
}
.header nav{
width: 100%;
text-align:right;
font-size: 0;
}
.header nav a{
text-decoration:none;
color:white;
display:inline-block;
font-size: 16px;
line-height: 52px;
padding:0 6px;
}
.header nav a:hover{
background-color: orange;
}
.banner img{
width: 100%;
}
.path{
display: flex;
list-style: none;
}
.path li{
padding:0 10px;
position: relative;
}
.path li a{
text-decoration: NONE;
color:gray;
font-size: 15px;
}
.path li+li ::before{
content:'/';
color:gray;
position:absolute;
left:0;
}
.wrap{
width: 960px;
margin:auto;
}
.item h3{
font-size: 30px;
padding:0 0 10px;
}
.about{}
.about > h2{
width: 960px;
margin:auto;
font-size: 46px;
text-align:center;
padding:40px 0;
}
.about > p{
width: 660px;
margin:auto;
text-align:center;
padding:0 0 30px;
}
.about .wrap{
display: flex;
width: 960px;
margin: auto;
}
.about .item{
text-align:center;
width: 300px;
margin: auto;
padding:0 10px;
}
.about .item img {
border-radius: 50%;
}
.product{
background-color:gray;
}
.product .wrap{
display: flex;
}
.product .item{
width: 50%;
position: relative;
}
.product .item img{
width: 100%;
vertical-align: bottom;
}
.product .item .tab{
background-color: red;
color:white;
padding:6px 10px;
position:absolute;
left:0;
top:0;
}
.product .pic{
}
.product .text > h3{
text-align: center;
display:flex;
flex-direction: column;
justify-content: center;
padding:0 20px;
padding:0 0 0px;
}
.product .text > p{
text-align: center;
display:flex;
flex-direction: column;
justify-content: center;
padding:0 20px;
}
.service{
padding:40px 0;
background-color:pink;
}
.service > h2{
width: 960px;
margin:auto;
font-size: 46px;
text-align:center;
padding:40px 0;
}
.service > p{
width: 660px;
margin:auto;
text-align:center;
padding:0 0 30px;
}
.service .wrap{
display:flex;
}
.service .item{
width: 220px;
margin: auto;
padding:0 10px;
text-align:center;
}
.service .item img{
width: 100%;
}
.footer{
background-color: black;
color:lightgrey;
text-align: center;
padding:10px 0;
}
ABOUT US
SERVICE
PRODUCTS
CONTACT US
ABOUT US
NEWS
HOMEPAGE
ABOUT US
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis illum dicta voluptate ea, quidem ullam quod quaerat itaque fuga similique.
title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore qui itaque iste, reiciendis accusantium ex sequi molestias quo iure! Repudiandae voluptate quaerat recusandae porro aut eaque officia voluptatibus ratione? Cum!
title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore qui itaque iste, reiciendis accusantium ex sequi molestias quo iure! Repudiandae voluptate quaerat recusandae porro aut eaque officia voluptatibus ratione? Cum!
title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore qui itaque iste, reiciendis accusantium ex sequi molestias quo iure! Repudiandae voluptate quaerat recusandae porro aut eaque officia voluptatibus ratione? Cum!
HOT
PRODUCTP Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit officia nobis delectus impedit quidem consectetur voluptatibus dolorum nam in expedita.
SERVICE
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est consectetur nisi iusto impedit eius corrupti autem quas voluptate ab, voluptates earum commodi quia. Sit minus itaque saepe et ullam laudantium!
title
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore temporibus est illo rerum voluptas cupiditate impedit vel ex magnam. Asperiores at quod eius aspernatur similique adipisci ab quia itaque?
title
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore temporibus est illo rerum voluptas cupiditate impedit vel ex magnam. Asperiores at quod eius aspernatur similique adipisci ab quia itaque?
title
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore temporibus est illo rerum voluptas cupiditate impedit vel ex magnam. Asperiores at quod eius aspernatur similique adipisci ab quia itaque?
title
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore temporibus est illo rerum voluptas cupiditate impedit vel ex magnam. Asperiores at quod eius aspernatur similique adipisci ab quia itaque?
©COPYRIGHT BY ALLISON WU STUDIO
想嘗試理解你的疑惑，看看別人的問題，說不定也是我的盲點，但你說的我還是不太懂「定位於圖片」是什麼意思😅 不明白position是放在.tab還是.img，提供的原始碼是對應哪個狀況，不過你的.tab那一欄的.item也沒有.img
另外，我看到.wrap是flex，而且.wrap容納了三個.item（意即三欄），因此三欄會平均分配空間，而每一欄裡面有什麼，就看各別.item包了什麼。其中，第一個.item只有HOT
複製了你的原始碼查看版面，我這邊看到.product是這樣顯示（最左／右側的空格是整條product的灰底範圍）：
+-------------------+-------------------+-------------------+-------------------+-------------------+
| | HOT | | PRODUCT | |
| | | 滿版圖片 | P Lorem | |
| | | | 內文以下略 | |
+-------------------+-------------------+-------------------+-------------------+-------------------+
但如果按F12的開發者工具，實際上只能圈選中間三格查看尺寸及其內容設定
我总是思路不清晰。不知道先做什么再做什么很混乱
那就先把思路弄清點再動手做
@@CSScoke 假如有多个DIV嵌套不知道给哪个设置，有没有什么诀窍
@@MiaoMizz 訣竅就是熟讀HTML標籤本身的語意，思考怎樣的結構合乎語意，接著在使用CSS的時候，從CSS原理去嘗試把版面寫出來，如果都沒有花時間作這些，那絕對學不會，別想一步登天哪
@@CSScoke 了解，谢谢老师
請問一下Amos老師，在14:26，為什麼.tab的div和img會重疊，div不是block
element，會佔有獨立的一列，img不是該顯示在div下方嗎？
在Fixed定位的那部影片有講到（約在6:50）
請問Amos老師，fakeimg 的外掛設定
我網路爬文，抓了一個外掛但是叫出來的只有灰底跟顯示大小的字樣
不像老師使用的會有隨機圖。
請問我能怎麼設定或是去哪邊找這個外掛
感謝
你用哪個編輯器？
@@CSScoke
目前新手期，兩個都有在用
VScode 我用lorem picsum
sublime 用的是 fakeimg.pl
@@river69air vscode 的話，安裝完套件，有兩個關鍵字可以使用，分別是 fakeimg 與 picsum
@@CSScoke 感謝老師解答😇
請問快速助解的快捷建是什麼 /* 965*/
Ctrl + /
老師您好 想請問你在sublime打fakeimg出現的卻是picsum網址 是如何辦到的呢 我在sublime外掛搜尋picsum沒出現東西 似乎是門獨門秘招@@?
自問自答 原來是用snippet達成 哈
老師，請問在11:19，怎麼一次選擇所有要一起插入內容的位置呢?有快捷鍵嗎?
VScode 的話，按 alt + 滑鼠點擊
sublime 的話，按ctrl + 滑鼠點擊
@@CSScoke VScode 的話，按 alt + 滑鼠點擊
老師好，請問依您在本集的提問16:33，做出蓋板廣告右上角的叉叉之後，是否綜合前幾集所說，接下來用其他程式語法搭配，做出把廣告關閉的功能?
想到把滑鼠移過去變成手型的設定就要用到但那是連結功能好像不太對@W@!?
可以使用CSS的 cursor: pointer; 改變你的滑鼠游標變成手指頭，搭配程式做關閉會是比較省事的做法，不然也可使用其他 比較麻煩的做法來做，這個就...要講太多了，跳過XD
Amos老師你好~又來打擾一下了哈哈
在14:13的時候設置了position:absolute，所以獨立一層出來沒問題，那我是不是能解釋成「一旦將物件設絕對定位，就會像fixed一樣先固定在原本位置?」(在無設置上下左右間距的情況下)
所以假設在14:28時.item .tab不要設top:0跟left:0，先將.item設置相對定位，結果發現tab沒有定在item的右上角(我認為應該要在border線上面)，就是因為這個原理嗎?所以我們才需要去設定.item .tab的top跟left為0對不對?
YES
老師你好，請問為什麼在 14:14 的地方，只要把 position 設為 absolute，就可以讓 .tab 的 width 縮成適合的大小(原本是一個長條變成一個方塊)，而不用再額外定義它的 width 呢？
當物件設定成絕對定位後，他會抽離資料流，並且自己一個「層」，此時的物件尚無法取得可用空間的大小，所以會採用物件內容的資料大小為基本尺寸
@@CSScoke 原來是這樣~謝謝
Amos你好，想請問一下在影片14分處，當 .item .tabP{}內設置了padding後，此時Hot還是在圖片的上方，但不懂為何
在 .item .tabP{} 內加上了 position:absolute後，HOT的區塊就會跑到圖片的左上角?
你看一下2:30那邊的觀念解說，看能夠理解嗎？那裡就是你問題的核心重點了
因為設定 position: absolute 後，物件會在資料原本所在的位置，並脫離父物件，且大小依照自身的 content 去撐，而不是依照父物件，這樣對嗎？
@@jecica196 子元素設定 position:absolute 後，它就脫離了原本的文字流向獨立出自己的空間，就好像跟父元素脫離父子關係一樣，其他的子元素會填補脫離的位置（它們是沒血沒淚的兄弟不留位置給脫離的）．
position:absolute 的子元素該從何處找到他們的定位？
必須根據上層是否定位給它目標，如果父元素願意溝通，有定位點 position:absolute 或 position:relative，那麼脫離的子元素會依照父元素框框左上角來定位，如果父元素冷戰沒有任何定位點，也沒有祖父級以上的元素出面溝通定位，那麼傷心欲絕脫離的子元素，它就會到外面去找定位點，也就是依據視窗左上角來定位。
好不容易讓廣告能在畫面置中了(揮汗
不過在手機平板的裝置不能正常顯示，這樣是對的嗎＠＠？
body{
width: 960px;
margin: auto;
}
.wrap{
/*width: 960px;*/
/*margin: auto;*/
display: flex;
}
.item{
width: 300px;
margin:auto;
padding: 10px;
border:1px solid #aaa;
position: fixed;
/*top:35%;*/
left:50%;
top:50%;
margin-left:-200px;
margin-top: -140px;
}
.item img {
width: 100%;
}
.tab{
background: #f00;
color: #fff;
padding:5px 8px;
position: absolute;
top: 0px;
right: 0px;
}
X
rain0sana 你的body設定了960px,超過平板的寬度啦，所以猜測你應該是畫面出現縮放導致物件「看起來」沒置中
你的wrap也忘了設定寬100%高100%
請問Amos老師11:22那個假圖快速鍵是哪個，我打tab都沒有出現。
需要安裝假圖的擴充程式，或者自己建置 snippet，安裝假圖的擴充程式關鍵字就是 fakeimg，在sublime中會找到兩個擴充程式，擇一安裝即可。
歡迎分享影片幫忙衝訂閱喔，謝啦
@@CSScoke 謝謝老師
請問 .item.tab為什麼不能直接.tab前面要加.item?
一件事情請你順手一下，下次幫我標註一下幾分幾秒我比較好找，不然講真的不知道你在問哪一段XDDDD
目前這個例子中是可以不需加 .item 直接寫 .tab，但是如果你把這個例子繼續延伸做下去的話，我不保證你會在其他非 .item 區塊中出現 .tab，這時候你畫面就可能出問題，所以為了避免該行CSS受到影響，多加一個 .item 是一種預防性的寫法。
@@CSScoke sorry~下次一定標註XD
思吟 陳 感謝啦🙏^_^