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

html css

jason311101 2018-12-03 08:38:26 ‧ 2548 瀏覽

分享至

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

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

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;
}

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

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

Zaku

iT邦新手 3 級 ‧ 2018-12-03 09:57:43

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

回應 12
分享
檢舉

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

jason311101 iT邦新手 4 級 ‧ 2018-12-03 10:06:15 檢舉

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

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

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

新手工程師 iT邦新手 5 級 ‧ 2018-12-03 10:40:23 檢舉

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

jason311101 iT邦新手 4 級 ‧ 2018-12-03 10:43:08 檢舉

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

新手工程師 iT邦新手 5 級 ‧ 2018-12-03 10:54:54 檢舉

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

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

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

jason311101 iT邦新手 4 級 ‧ 2018-12-03 10:58:35 檢舉

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

新手工程師 iT邦新手 5 級 ‧ 2018-12-03 10:59:21 檢舉

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

jason311101 iT邦新手 4 級 ‧ 2018-12-03 11:03:41 檢舉

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

Zaku iT邦新手 3 級 ‧ 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; //加這個

jason311101 iT邦新手 4 級 ‧ 2018-12-03 11:13:54 檢舉

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

jason311101 iT邦新手 4 級 ‧ 2018-12-03 11:32:13 檢舉

用響應式配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;
}

登入發表回應