在網站中處理定位的最佳方式

-1

當我在大屏幕上開發它們並在小屏幕上顯示時，我的網頁上的某些項目的位置保持略微移動，它們稍微偏離了位置，反之亦然。在網站中處理定位的最佳方式

這從來沒有過我，但是這也是我在asp.net開發的第一個站點，這裏是我的CSS

#backb{ 
    position:absolute; 
    left :22%; 
    bottom:10%; 
} 

#backf{ 
    position:absolute; 
    left :12%; 
    bottom:0%; 
} 

#avatar{ 
    position:absolute; 
    left :55%; 
    bottom:45%; 
}

來源

2012-03-11 user1173371

嘗試添加overflow-y：滾動到主體 – jacktheripper 2012-03-11 11:51:45

爲什麼你使用position：absolute？ – sandeep 2012-03-11 11:55:06

*這從來沒有發生過我以前* - 它發生在每個人偶爾有一次，不要擔心，夥計... *咯咯* – vzwick 2012-03-11 11:58:43

有作爲最佳的定位沒有這樣的事情，而設計一個頁面。您應該使用跨瀏覽器和不同系統交叉兼容的技術。

在你的CSS，你正在使用

position: absolute;

在使用這種風格相對於它的第一個定位的祖先元素，元素的定位。所以，默認情況下，其位置將相對於<body>。

接下來，您正在使用percentage(%)指定元素不同位置的值。這個值是由瀏覽器針對第一個相對定位的祖先進行計算的，這也是默認的<body>，所以每當分辨率改變時模板都會相應地移位。

現在，我的一些指針。

請勿使用position:absolute除非其絕對必要。
使用百分比％值總是會導致流體結果，所以如果您不知道如何處理它，請不要使用它。

來源

2012-03-11 12:00:11 Starx

可否請您指出我正確的方向，以解決問題 – user1173371 2012-03-11 12:02:27

@ user1173371，爲您上傳您需要的結果（只有佈局，請省略內部的東西）和您的佈局標記的圖像。我會表明它可以在沒有絕對位置和瘋狂比例的情況下完成。 – Starx 2012-03-11 12:04:38

您的CSS的問題是您使用百分比。如果您知道您正在使用X％的容器，則只能使用百分比，實際上可以被該數字整除。也許你可以嘗試使用固定的寬度。我也同意以前的評論：儘量避免位置：絕對，特別是對於佈局的主要組件。

在爲CSS寫了多年的coulpe之後，我發現我和我的同事們一遍又一遍地重新發明了輪子，並且在所有不同的瀏覽器上測試主佈局是一件痛苦的事情。我們的結論是，只要信任社區並在框架上實現標準化就容易多了。它不會適用於所有網站，但是如果您爲許多不同的客戶端編寫CSS，它將佔用超過90％的時間。我看了幾個不同的框架，並讓我的超過35人的公司標準化爲新版本的YAML（http://www.yaml.de/）。它多次加快了發展速度，但不要聽我的話。看看他們的優秀教程。我真的很棒。乾杯。

來源

2012-03-11 13:10:54 koenpeters

在網站中處理定位的最佳方式

回答

相關問題