使用css的浮动div

在我的项目中我需要这种效果。有一个左角浮动的红色色带。但是我想用css为图像实现它。请参考下图

---

.

您可以使用

位置：固定用于div

示例代码

css

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

html

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



演示

您可以修改
background
属性以添加自定义背景图像，如
background:url（“图像路径”）。
它称为固定位置。以下是实现这一点的css：

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

假设这是你的DIV

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

当您希望图像保持在页面上时，无论页面是否滚动，请使用fixed位置；当您希望图像保持在页面左上方时，请使用绝对位置，这意味着当您向下滚动页面时，图像将滚动

您提供的链接示例使用了固定的，因此无论滚动如何，它都会保持在那里。
很容易做到，请执行以下操作：

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

这将使您的效果是，此div永远不会离开浏览器的可见区域。
其他位置值包括：

静态——默认值

绝对--绝对是指页面，而不是浏览器窗口

相对——相对于如果位置是静态的，它将是什么，这已经是一个图像了。它不使用浮动的
div

此CSS用于
正文
：

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

您可以使用定位的div：

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

如果是与内容相关的图像，最好在此分区中使用带有alt属性的
标记。
位置：固定；左：0；排名：0在这里：如果使用绝对值，它将不会固定到浏览器的位置window@Antwan字体我知道。他只提到了link的形象，据我理解，这并不意味着功能性。因此，我解释了这两个问题，以便他能够决定他真正需要什么。
#myImgDiv
{
   position: fixed;
   top: 0;
   left: 0;
   background-image: url(path/to-img.png);
}