Showing posts with label fixed. Show all posts
Showing posts with label fixed. Show all posts

Saturday, March 01, 2008

关于CSS中的position和float的二点说明

1、当float的元素的margin为负值时,其周边元素内容可能会覆盖到float元素上面。当float元素宽度大于容器宽度并margin为负值时,会使得float元素在容器二边都超出。
2、position: absolute的元素的一系列上级元素如果具有position:absolute/relative/fixed属性时,会根据其上级元素进行绝对定位。如果其上级元素没有position属性,则根据整个html文档定位。

Sunday, February 24, 2008

[CSS Zen Garden] Position fixed property of CSS2 and IE6

Exploiting the fact that Internet Explorer lacks support for fixed positioning and for child selectors, a series of rules were created to deliver the optimal design to browsers that comply with the rules of CSS, and to deliver the alternate design to Internet Explorer:

body#css-zen-garden>div#extraDiv2 {
background-image: url(bg_face.jpg);
background-repeat: no-repeat;
background-position: left bottom;
position: fixed;
left: 0;
bottom: 0;
height: 594px;
width: 205px;
z-index: 2;
}

The following CSS is applied only in browsers that don't understand the previous rule, in this case Internet Explorer. Because the child selectors imply greater specificity, the former rule takes precedence, but only if the browser understands it.
div#extraDiv2 {
background-image: url(bg_face_ie.jpg);
background-repeat: no-repeat;
background-position: left bottom;
position: absolute;
left: 0;
bottom: 0;
height: 600px;
width: 265px;
}

While the fixed-position image scrolls off the page in Internet Explorer 6.0, the design is still attractive and acceptable.

IE7 has supported position fixed property if it’s in standard mode.
reference:
http://www.csszengarden.com/?cssfile=037/037.css