使用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

回答

相关问题