[問題] 關於特效影響版面的問題

看板Web_Design作者 (鐘愛五六)時間12年前 (2013/10/23 19:38), 編輯推噓8(809)
留言17則, 6人參與, 最新討論串1/1
小弟現在正在自學HTML5 最近遇到一個問題 我參照買的書籍一一去實作 想要將功能結合起來時 卻遇到了特效影響到我版面的配置 原本有一個用JQUERY作的下拉式主選單 $('#Navigation li').hover( function(){ $(this).find('.SubMenu').slideToggle(); }, function(){ $(this).find('.SubMenu').slideUp(); } ); 滑鼠移進去下拉的選單出現 整個版面往下移 很不美觀 有嘗試用Z-index來做上下排版 但沒有甚麼作用 還是一樣會版面跑掉 不知道有沒有好方法可以解決 謝謝 -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 59.126.204.136

10/23 21:16, , 1F
Html css?
10/23 21:16, 1F

10/23 21:27, , 2F
嗯... z-index...確認是在 對的物件裡面設定對的zinde
10/23 21:27, 2F

10/23 21:30, , 3F
.submenu 沒有 position: absolute ?
10/23 21:30, 3F

10/24 01:16, , 4F
和樓上一樣想到 position: absolute
10/24 01:16, 4F

10/24 04:05, , 5F
position:relative 也可
10/24 04:05, 5F
感謝各位神人解答 將submenu設position:absolute就可以了!!! relative使用後情況跟未使用前一樣= =" 可使這樣我的z-index設定值就沒有用了.... 是因為放在submenu下面的圖片不能跟ol li進行疊合動作嗎? 我之前一直以為是要固定圖片的位置,然後利用疊合方式使submenu可以覆蓋住圖片 結果是要直接改submenu的position 不好意思 小弟才疏學淺 不太明白這樣做的意義到底是? ※ 編輯: stilllove56 來自: 59.126.204.136 (10/24 09:19)

10/24 10:37, , 6F
也許是你 外層的設定是position:relatvie or absolute
10/24 10:37, 6F

10/24 10:37, , 7F
當你內層的element 設定position的時候 他抓的起始點
10/24 10:37, 7F

10/24 10:37, , 8F
就不一樣了… 排版的觀念??
10/24 10:37, 8F

10/24 12:45, , 9F
呃,你如果拿掉 submenu 的 dispaly: none 就會知道了,
10/24 12:45, 9F

10/24 12:45, , 10F
"東西被推下去" 是 submenu 存在時本來就會發生的事情,
10/24 12:45, 10F

10/24 12:46, , 11F
jQ 的 slide 只是在幫你做 display 與 height 的控制而已
10/24 12:46, 11F

10/24 12:48, , 12F
你可以想像成加了 position: absolute 後會讓 submenu
10/24 12:48, 12F

10/24 12:48, , 13F
跑到另一個圖層,而在原本的地方不佔任何位置
10/24 12:48, 13F

10/24 12:50, , 14F
感覺原 po 好像需要先深入了解一下 CSS
10/24 12:50, 14F
當初CSS真的是只有看一些指令皮毛而已 都只看指令出來的效果,背後的意義不太了解 看來還需要再找本專寫CSS的書來看 排版面這學問真的是博大精深阿= =" 謝謝各位的幫忙!! ※ 編輯: stilllove56 來自: 59.126.204.136 (10/24 14:03)

10/24 14:35, , 15F
http://goo.gl/7vJHBb Learn CSS Positioning in Ten Steps
10/24 14:35, 15F

10/24 14:36, , 16F
上面那個看一看基本的排版就能自己處理了
10/24 14:36, 16F

10/24 14:37, , 17F
用css 寫個多階下拉選單的話 應該可以幫忙加強這一部份
10/24 14:37, 17F
文章代碼(AID): #1IPxKzr4 (Web_Design)