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

2022-12-07 17:26:17 字數 4569 閱讀 4689

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

怎麼設定div垂直和水平都居中在css樣式中

水平居中可以,垂直居中的話就麻煩了 整個容器水平居中margin 0 auto 上下0 左右自動 容器內的內容水平居中align center 容器內的內容單行垂直居中的話,把行高line height跟容器高設成一樣就行了,整個容器垂直居中的話該用用js了 為該div設定樣式 margin xpx...

怎麼樣才能做到遇事冷靜思考,怎樣能做到遇事不著急,冷靜思考,沉著應對?

人的生存境界是指人對活著的看法,一般地說過去的是經驗,現在的是事實,未來的是理想,人們總是感嘆過去的幼稚,現在的痛苦,未來的渺茫,這是很正常的心態。人生裡有種傷害是一份厚愛,那種傷害最初給予我們的也許是劇痛,但隨著年齡的增長,閱歷的豐富,我們才會品味出,劇痛過後的平淡和從容是一種幸福。所以我們都應該...

怎麼能做到成為幸福的女人,怎麼能做到成為一個幸福的女人?

學會適當的保養。女人學會保養自己,才是生活幸福的源泉。試想,誰不想看到如花兒一樣的你,你也不願在鏡子中看到自己的樣子而變得傷感吧。保養要適當,沉迷其中反而不快樂了。對女人來說,有閨蜜是一件很幸福的事。因為只有閨蜜才可以讓你任性,你才可以肆無忌憚在她懷裡大哭,才可以毫無顧忌地訴說你的心事 你的祕密。因...