css能做到固定垂直位置而不固定水平位置嗎

2022-12-09 06:46:15 字數 4569 閱讀 9375

1樓:你和它的小夥伴

做一個div始終在瀏覽器上下左右都居中很好做,可是我有點不明白你說的,有點疑問,如下說明:

首先我用box1來代表父div,box2代表子div來舉例說明:

條件:1、box2必須在瀏覽器上下左右都居中

2、box2距離box1左邊距為10px

3、暫時不考慮box1和box2的寬和高

疑問:box2定位在螢幕中間後,然後距離box1的左邊距還為10px,那麼其實box1的位置也是確定了的,box1的位置就是在瀏覽器居中後像左邊移動10px,可是這樣又於你說的box1能隨意動,產生了很大矛盾,比如當box1向右移動100px,那麼box2必須跟隨box1向右移動100px,必然左邊距為10px的條件就當然無存,可是移動之後,box2又不再居中了,所以我的疑問是你表達的不清楚?還是我理解有問題..

解決方案:根據你模糊的提問,我只能這樣回答你,css是無法做到這點的,如果加js輔助,應該可以這樣解決,分為以下4步:

1、比如現在假設box1為寬為500px,高為500px,box2寬為100px,高為100px。

2、定位box2在螢幕上下左右居中,這時候其實box1也是定位了的(不信你自己測試)。

3、當box1移動的時候,比如向上移動了100px,向左移動了100px,因為box2只距box1左邊10px,所以也會跟隨父元素向上和左移動100px。

4、給box2寬和高都增加50px,那麼這時候box2依然是在瀏覽器中居中顯示的!

總結:box2的屬性必須是動態的,寬和高必須隨著box1的位置而增加或這減少大小,才能保證其位置始終處於瀏覽器居中顯示!

最後:分析了好久,研究了好久,完全純手打!不容易啊~

2樓:匿名使用者

用定位來解決

(position:fixed;

top:50%;

margin:-(這個值由你的div的高度決定,取值高度的一半) 0 0 10px;)

希望能夠幫到你

3樓:

父div設定:

display:table;

子div設定:

diaplay:table-cell;

vertical-align:middle;

padding-left:10px;

我在ie9,ff下測試了沒有問題,你試試。

css div 固定一個div 使這個div不隨著網頁的滾而滾動 就是把這個div固定在一個位置任何時候都在一個位置

4樓:飛喵某

1、需要使用固定定位才能做到這樣的效果。具體方法是首先開啟html編輯器,首先設定一個容器div,然後設定一個用來演示效果的div,分別設定class屬性名為container和fixed:

2、在style標籤中設定樣式,設定container的position屬性為相對定位,並且給它一個很高的高度,然後給fixed設定高度和寬度,以及顏色等屬性,這裡的重點是設定position屬性為fixed,以及設定top和left屬性控制div的位置,設定完成後儲存檔案:

3、開啟瀏覽器,可以看到div並且可以觀察到進度條是最上面的:

4、接著將進度條拉倒最下面,可以發現div還是在原來的位置保持不變。以上就是用fixed屬性設定div固定位置的方法:

5樓:

給div加個position:fixed;top:0px; left:

0px;可讓該div固定在網頁的頂部左側,且不會隨網頁而滾動。如若想固定在其他位置,只需要改動top,left,right,bottom屬性值即可。

6樓:匿名使用者

用css的position:fixed; 絕對定位不動

7樓:q我

用絕對定位

//絕對定位和相對定位

position: absolute;

z-index: 100;

left: 100px;

top: 100px;

--------------------

position: relative;父元素position: absolute;子元素

8樓:

可以使用position定位

1、position:absolute 絕對定位

生成絕對定位的元素,相對於 static 定位以外的第一個父元素進行定位。

元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

2、position:fixed 固定定位

生成絕對定位的元素,相對於瀏覽器視窗進行定位。

元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

3、position:relative 相對定位

生成相對定位的元素,相對於其正常位置進行定位。

因此,"left:20" 會向元素的 left 位置新增 20 畫素。

根據你講的,使用position:fixed固定定位

9樓:匿名使用者

用css的position:fixed;可以固定,如下例項:我不動

10樓:迴夢無恨

選單子選單

子選單子選單

子選單子選單

子選單子選單

怎麼讓div固定在頁面的某個位置而不隨著滾動條隨意滾動?

11樓:匿名使用者

吧一個內容固定到某來一個位

自置 ,相對與瀏覽器bai

視窗進行定位就du可以了。

定位 position 通常有zhi absolute 絕對定位,relative 相對定位,這個dao都是相對於body裡面的塊元素來說的,但是如果說想要吧某一個內容就國定在某一個位置,無論滾動條滑到**,他依然在瀏覽器視窗這個位置,就需要用到fixed了 。

fixed 元素框的表現類似於將 position 設定為 absolute,不過其包含塊是視窗本身。同意具有 left 、 top、right、bottom 的值 他的用法和 absolute 類似

詳情可以參考一下 w3c 裡面的 解釋。

12樓:

給div 加固定定位,比如你要固定到右下角:div

13樓:匿名使用者

設定div為固定bai位置。如:

du這樣就會固定zhi在left:300px;top:300px;的位置dao

,不會隨著滾動條的版滾權動而滾動

css裡面相對定位和絕對定位哪個會影響佈局?

14樓:冉姑娘

都有可能影響你的佈局;

相對定位:是相對於某一個元素進行定位,這個元素可能是一個div也可能是一個span標籤,根據你的需要來定;然後,可以通過設定垂直或水平位置,讓這個元素“相對於”它的起點進行移動。

絕對定位:絕對定位是以整個頁面最左上角的位置為座標進行定位,而你所設定的數值也是根據左上角的位置來確定,

這兩個都會對我們的佈局產生一定的影響,我們要做的就是根據我們的需要,讓他們儘可能的調整位置,不影響我們的佈局

15樓:匿名使用者

相對定位會根據原來的位置進行移動,之前的位置被空了出來,會影響頁面佈局。

絕對定位脫離了文字流,不會影響佈局。

16樓:匿名使用者

都會影響佈局。假設現在有一個二維的座標系(x,y)座標系,在(1,1)這個地方我們有一個點a,現在用絕對定位去定位點b(2,2),這樣的話b點的座標相對於座標系來說就是在(2,2)這個點上。如果是用相對定位(2,2)去定義b點,那麼b點對於整個座標系來說的座標就是(3,3)。

不知道你能不能聽明白。

17樓:

二樓正解, 相對定位 是相對於於當前父級div來定位 ,絕對定位是相對於整個頁面body來定位

谷歌和ie的瀏覽器css+div定位佈局問題. 導航欄的位置顯示不同,水平位置一樣,垂直位置谷歌正常ie卻稍稍上

18樓:匿名使用者

你好,每個瀏覽器都有預設的margin值和padding值,你可以在css中先設定好全域性,一般我在做網頁前都會先在css中加入 *,這樣就重置了瀏覽器的預設值。

希望我的回答能幫到你!謝謝!

19樓:匿名使用者

用**不可取,最好用背景定位css小精靈

20樓:使者

針對ie寫hack!

css怎麼讓絕對定位的div水平垂直居中?

21樓:沮喪的傑克

水平居中 left:50%; margin-left:-div寬度的50%

垂直居中 top:50%; margin-top:-div高度的50% (高度不定的話就不瞭解了)

22樓:小q帝國哦

left:50%;margin-left:-25%;

怎麼才能做到低調做人,高調做事,怎麼才能做到低調做人,高調做事?

低調做人很是一門學問啊,比如受表揚的時候,旁邊有其他人一起受表揚,你就說這些都是該做的,同志才是我們公司的楷模,工作努力,在平時工作一貫嚴謹認真,特別是在前天,公司出現了zzzz,同志堅持工作必須嚴謹的態度,完成了這次上級領導檢查。這個叫轉移注意力,這樣你周圍的同事啊,都不會注意你,等回過神的時候,...

怎麼才能做到不忘初心,怎樣才能做到不忘初心,方得始終呢

有風和日麗,鳥語花香,在暮春的時光看小草的新綠,在溫煦的春風中沐浴。也有野花芬芳馥郁,清新脫俗,待到山花爛漫時,她在叢中笑。更或者,羞澀的花瓣含苞待放,欲放含羞,微風中隨綠色的荷葉輕輕搖曳婀娜的身姿,小荷才露尖尖角 很多很多的美景,只能矯首暇觀,那些年,已匆匆而過。很多時候擁有的不懂珍惜,當錯過後只...

分手怎麼才能做到好聚好散,怎樣才能做到好聚好散呢

好合好分,對彼此都好。怎樣分手不傷害對方,分手應該直接面對面和對方說,選擇分手要注重場合和時間,要給對方留面子,分手時候不要中傷對方,多說自己的缺點。怎樣分手不傷害對方?1 直接說 分手不要用簡訊,發郵件的方式,可以面對面說出來,這樣可以降低對方留下創傷,直接說出來,進行非語言的交流,讓對方覺得還是...