Floating div using css

i need this kind of effect in my project. there is a left corner floating re开发者_JAVA百科d color strip. but i want to implement it for image using css. Please refer below image

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

---

you can use position:fixed; for a div.

Example code

css

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

html

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

Demo http://jsbin.com/aqofa5

You can modify the background property to add your custom background image like background:url("the-path-for-the-image").

---

It is called fixed position. Here is css that accomplishes this:

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

More info.

---

You can use a positioned div:

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

If it's an image related to content, it's best to use an <img> tag with an alt attribute within this div.

---

Let's say this is you DIV

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

This should be CSS style:

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

Use fixed position when you want your image to stay there regardless of page scrolling and absolute when you want it to stay top left on your page which means it will scroll when you'll scroll the page down.

The example you provided with a link uses fixed hence it stays there regardless of scrolling.

---

Pretty easy to be done, do the following:

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

This will give you the effect that this div will never leave the visible area of the browser. Other position values are:

Static -- default

Absolute -- absolute in terms of the page, not the browser window

Relative -- relative to what it would be if the position was static

---

This is already an image. It doesn't use a floating div.

This CSS is used for the 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;