使用css浮動div

我需要這種效果在我的項目中。有一個左角的浮動紅色條。但我想用css實現它的圖像。請參考下圖使用css浮動div

http://www.w3.org/TR/xhtml2/mod-tables.html#sec_26.6.1。

來源

2011-02-01 Vicky

`position：fixed; left：0; top：0;` – 2011-02-01 12:34:33

here you go：http://www.quackit.com/css/codes/css_floating_menu.cfm – 2011-02-01 12:36:06

您可以使用position:fixed;作爲div。

實施例代碼

CSS

#redBar {width:40px; height:200px; position:fixed; background:red;}

HTML

<div id="redBar"></div>

演示http://jsbin.com/aqofa5

您可以修改background屬性以添加您的自定義背景圖像，如background:url("the-path-for-the-image").

來源

2011-02-01 12:34:57 Sotiris

它被稱爲固定位置。這裏是CSS，完成此：

.element { position:fixed; top:2%; right:2%;}

More info.

來源

2011-02-01 12:35:27 gor

比方說，這是你DIV

<div id="alwaysThere"><img src="..."></div>

這應該是CSS樣式：

#alwaysThere 
{ 
    position: fixed; /* or absolute if you want it to be fixed page top-left */ 
    top: 0; 
    left: 0; 
}

使用固定位置當你想讓你的圖像留在那裏時無論頁面滾動和絕對當你希望它留在您的頁面左上角，這意味着它會滾動時，你會向下滾動頁面。

您提供鏈接的示例使用固定因此，無論滾動如何，它都會保持在那裏。

來源

2011-02-01 12:35:31

很容易做到，做到以下幾點：

div#divID 
{ 
    position:fixed; 
    top:0px; 
    left:0px; 
}

這會給你的效果是這個div永遠不會離開瀏覽器的可見區域。其他位置值分別是：

靜態 - 默認

絕對 - 絕對的頁面，而不是瀏覽器窗口的條款

相對的 - 相對於它會是什麼，如果位置是靜態的

來源

2011-02-01 12:35:51

這已經是一個圖像。它不使用浮動div。

這個CSS用於body：

background-image: url(http://www.w3.org/StyleSheets/TR/logo-ED); 
background: white; 
background-position: top left; 
background-attachment: fixed; 
background-repeat: no-repeat;

來源

2011-02-01 12:36:21 Koraktor

您可以使用定位的div：

#myImgDiv 
{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    background-image: url(path/to-img.png); 
}

如果它的內容有關的圖像，最好使用一個<img>標籤與這個div內的alt屬性。

來源

2011-02-01 12:36:41 Kyle

使用css浮動div

回答

相關問題