iT邦幫忙

0

HTML將元素固定在頁面右側(非畫面右側)

如題 我想將這個"畫面右側"的元素(藍框)

固定在"頁面右側"(紅框)的位置

css

ul.menu,
ul.menu2,
ul.menu3 {
	position:			absolute;
	top:				3px;
	background-color:	#efffc0;
	border-width:		1px;
	border-style:		solid;
	border-color:		#efffc0 #A3987B #A3987B #efffc0;
	margin:				0;
	padding:			3px 7px;
	font-size:			92%;
	height:				20px;
}
ul.menu {
	width:				128px;
	right:				8px;
}

用張簡單的構圖說明下目前的狀況

1 個回答

0
Zaku
iT邦新手 4 級 ‧ 2018-12-03 09:57:43

大大你要貼一下你的程式碼,這樣不好理解你要固定在哪個位置。若要要畫面怎麼滾都在同一個位置position: fixed; top:0; right:0;,若是要在最上方那條bar,那把元素放到那條bar之內,用float: right;

看更多先前的回應...收起先前的回應...

已補上 另外fixed我試過還是只能固定在畫面右側

Zaku iT邦新手 4 級 ‧ 2018-12-03 10:36:16 檢舉

大大可以再補充一下你圖裡那些黑色框框分別是哪個menu嗎,還有你的紅,藍,紅+藍色分別要做什麼

你的ul.menu3是放在ul.menu裡嗎??
因為position會跟父層有關連
如果你的ul.menu3是放在ul.menu裡的話,
position應該可以維持absolute,然後加個right:0;

黑色框框代表的是"整個頁面" 紅色是我希望出現的位置 藍色則是目前出現的位置 要理解的話用電腦瀏覽器把該頁面放大縮小應該就能理解了
頁面網址:http://ac1011.hopto.org:4095/zh_index.html
ul.menu3是放在title裡

你是希望頁面大的時候在右上角,當螢幕瀏覽器畫面較小的時候不會去卡到左邊的ul.menu2跟ul.menu3是嗎??

Zaku iT邦新手 4 級 ‧ 2018-12-03 10:57:51 檢舉

圖片對不太起來,請問你是說你的menu不想畫面縮放的時候,想要他一直維持看不見(在最右邊)的意思嗎?

大致是這樣沒錯 可是我希望當頁面寬度小於950px時是出現在卷軸滾過去的頁面右上角而不是當前小於950px的這個可視畫面的右上角

這應該要作響應式設計~
當media width > 950px的時候是一個樣式
media width < 950px 就是另一個樣式

當 < 950px時改用margin把他推到最右側是嗎?

Zaku iT邦新手 4 級 ‧ 2018-12-03 11:07:18 檢舉
.title {
    width: 950px;   //加這個
}
.ul.menu, ul.menu2, ul.menu3 {
    /* position: absolute; 這個拿掉 */
    display: inline-block; //加這個
}
ul.menu {
    width: 128px;
    /* right: 8px; 這個拿掉*/
    float: right; //加這個

改成min-width是有功能了可是原本的top那些樣式都失效了

用響應式配position:relative總算是做出來了 另外剛測出最大
寬度是970px 不過要等到畫面放大到990px改絕對定位才會一直在右上角
最後成品如下:

#title {
	background-image:	url(../img/flower1.gif);
	margin:				0;
	height:				24px;
	min-width:			970px;
}
@media screen and (min-width: 0px) and (max-width: 990px) {
	ul.menu {
		position:			relative;
		top:				3px;
		margin:				0 0 0 830px;
	}
}
@media screen and (min-width: 991px) {
	ul.menu {
		position:			absolute;
		top:				3px;
		margin:				0;
	}
}
ul.menu,
ul.menu2,
ul.menu3 {
	background-color:	#efffc0;
	border-width:		1px;
	border-style:		solid;
	border-color:		#efffc0 #A3987B #A3987B #efffc0;
	padding:			3px 7px;
	font-size:			92%;
	height:				20px;
}
ul.menu2,
ul.menu3 {
	position:			absolute;
	top:				3px;
	margin:				0;
}

我要發表回答

立即登入回答