使用CSS定位相對於其容器的HTML元素

159

我試圖使用HTML和CSS創建水平的100％堆積條形圖。我想創建帶有背景顏色和百分比寬度的DIV的條形圖，具體取決於我想要繪製的值。我也想要一個網格線來標記圖上的任意位置。使用CSS定位相對於其容器的HTML元素

在我的實驗中，我已經通過分配CSS屬性float: left來獲得水平堆疊條。不過，我想避免這種情況，因爲它似乎以混亂的方式混淆了佈局。此外，網格線條在浮動時似乎效果不佳。

我認爲CSS定位應該能夠處理這個問題，但我還不知道該怎麼做。我想能夠指定幾個元素相對於其容器左上角的位置。我碰到這種問題的定期（甚至超出這個特定的圖形項目的），所以我想這是一個方法：

跨瀏覽器（最好是沒有太多的瀏覽器的黑客）
奔跑怪癖模式
儘可能清晰/儘可能方便定製
儘可能不使用JavaScript即可完成。

來源

2008-09-19 Craig Walker

爲什麼它必須以怪癖模式運行？ – 2008-09-19 19:49:41

由於該網站我將要添加它以怪癖模式運行，並且在這十年內任何時候都不會改變。 :-P – 2008-09-19 19:55:51

你必須在HTML中做到這一點嗎？你可以使用谷歌圖表嗎？ http://code.google.com/apis/chart/#bar_charts – 2008-09-22 19:58:21

335

你說得對，CSS定位是要走的路。這是一個快速運行：

position: relative將佈局一個元素相對於本身。換句話說，元素按正常流程佈置，然後將其從正常流程中移除，並按您指定的任何值（頂部，右側，底部，左側）進行偏移。重要的是要注意，因爲它從流中移除，所以其周圍的其他元素將不會隨之移動（如果需要此行爲，請使用負邊距）。

但是，您最有可能對position: absolute感興趣，它將相對於容器定位元素。默認情況下，容器是瀏覽器窗口，但是如果父元素上設置了position: relative或position: absolute，那麼它將作爲父級定位座標的父級。

爲了證明：

<div id="container"> 
    <div id="box"> </div> 
</div>

#container { 
    position: relative; 
} 

#box { 
    position: absolute; 
    top: 100px; 
    left: 50px; 
}

在這個例子中，#box左上角是100像素下來，50px的左#container左上角的。如果#container沒有設置position: relative，則座標#box將相對於瀏覽器視圖端口的左上角。

希望有所幫助。

來源

2008-09-19 20:01:06

您必須顯式設置父容器的位置以及子容器的位置。做到這一點的典型方式是這樣的：一個元素相對於最近的已定位祖先

div.parent{ 
    position: relative; 
    left: 0px; /* stick it wherever it was positioned by default */ 
    top: 0px; 
} 

div.child{ 
    position: absolute; 
    left: 10px; 
    top: 10px; 
}

來源

2008-09-19 19:50:53

絕對定位的位置。因此，將position: relative放在容器上，那麼對於子元素，只要子元素具有position: absolute，則top和left將相對於容器的左上角。更多信息請參見the CSS 2.1 specification。

來源

2008-09-19 19:53:05 Jim

我知道我很晚但希望這有助於。

以下是位置屬性的值。

靜態
固定
相對
絕對

位置：靜態

這是缺省值。這意味着元素將發生在它通常會發生的位置。

#myelem { 
    position : static; 
}

位置是：固定

這將設置的元件的位置相對於所述的瀏覽器窗口（視口）。即使頁面滾動，固定位置的元素也會保留在其位置上。

（理想的情況下，如果你想在頁面右下角的滾動到頂部的按鈕）。

#myelem { 
    position : fixed; 
    bottom : 30px; 
    right : 30px; 
}

位置：相對於

要放置的一個元素的新相對於它的原始位置的位置。

#myelem { 
    position : relative; 
    left : 30px; 
    top : 30px; 
}

以上CSS將#myelem元素30像素的左側和30像素從它的實際位置的上方移動。

位置：絕對

如果我們想要一個元素被放置在頁面的確切位置。

#myelem { 
    position : absolute; 
    top : 30px; 
    left : 300px; 
}

上述CSS將在位置30像素從頂部位置#myelem元件和從在頁面的左側300像素和其將與頁滾動。

最後...

位置相對+絕對

我們可以在父元素的位置屬性設置爲相對，然後將子元素的位置屬性設置爲絕對。這樣我們可以將孩子相對於父母定位在絕對位置。

#container { 
    position : relative; 
} 

#div-2 { 
    position : absolute; 
    top : 0; 
    right : 0; 
}

我們可以在上述圖像中看到的＃DIV-2元件被定位在#container的元件內部的右上角。

GitHub：您可以找到上述圖片here和CSS here的HTML。

希望這tutorial幫助。

來源

2017-06-29 08:09:41 yusufshakeel

使用CSS定位相對於其容器的HTML元素

回答

相關問題