邪罗刹的菠萝阁

> 小邪折腾了两天没写什么文章，一直在做这个博客圣诞套装，昨天在弄设计方案和雪的效果。
> 今天设计图拆分出来，然后用 CSS 代码把这些元素摆放到位，相对定位快把我折腾挂掉。

> 终于搞定了，快升天了，以后要是找不到小邪，就烧纸。记住，你烧的不是纸，是寂寞。
> ╮(╯▽╰)╭，弄个圣诞套装花了俩天，信春哥不管用了，话说2012年春哥保佑是不是不用上船？

1. 相对定位的占位概念：

> 注意！！使用相对定位移开元素后，元素原来的位置所占用的空间依然保留。
> 在图中，圣诞老人原位置是在标题的右边。
> 而我把他向下移动了，但是原来把导航栏挤出位子的情况依然存在。

2. 相对占位的特点与如何利用：

> 特点！！当我们装饰图片的 DIV 处于另外 DIV 的底部，即内容在此之上的时候。
> 我们若把图片的 DIV 的高度设置为 0，即可防止挤压其他的元素。

</li></ul>
<!-- navigation END -->
<!-- Christmas -->
<div id="evlos_chr">
<img id="evlos_chr_001" src="/global/tool/picroom/save/christmas/001.png" />
</div>
</div></div></div>
<!-- header END -->

3. 顺带介绍一个属性 Visibility:hidden：

> 这个属性基本和 Display:none 相同，功能都是隐藏一个元素。
> 但是使用 Visible:hidden 属性会使对象不可见。但该对象在网页所占的空间没有改变。
> 而 Display:none 属性会使这个对象彻底消失，并且不占用空间。

4. 搞定顶部的圣诞装饰：

> 使用以下的 CSS 代码，终于让它们到了它们该去的地方了。
> 而这里的关键在于一定要选好相对的父元素，我选的是框住整个顶部的 DIV。

#evlos_chr {height:0;width:0;}
#evlos_chr img {
 background:none;border:none;margin:0;
 padding:0;position:relative;
}
#evlos_chr_001 {top:45px;left:-310px;}
#evlos_chr_010 {top:-90px;left:170px;}
#evlos_chr_002 {top:-165px;left:439px;}

> 貌似成功了，在 Chrome 和 Safari 里完全正常，其实是一个大杯具呀 ( ⊙o⊙ )。
> 因为 Oprea 和 Firefox 下显示是这样子的。

> 不只是杯具，看这里的茶几。在 IEtest 里的 IE6 中几乎是一个洗具。

> 只能把这三张图片放到这里，然后重新相对定位了，史无前例的大杯具啊。

<div id="container">
<div id="content">
<div id="main">
<!-- Christmas -->
<div id="evlos_chr_header">
<div id="evlos_chr">
<img id="evlos_chr_001" src="/global/tool/picroom/save/christmas/001.png" />
<img id="evlos_chr_010" src="/global/tool/picroom/save/christmas/010_Top.png" />
<img id="evlos_chr_002" src="/global/tool/picroom/save/christmas/002.png" />
</div></div>

> 吼吼。在 IE6 里面除了不支持背景透明，和稍微有一点点偏移，其他都很好了。

> 话说在 IE6 、IE7 和 IE 8 里全有相同程度的偏移，见鬼的 IE。蛋定，要蛋定。
> 这里使用”*“星号进行修正，这个符号只有 IE 会去解析，其他的浏览器一概不理。

#evlos_chr_001 {top:60px;left:-60px;*top:56px;}
#evlos_chr_010 {top:-74px;left:245px;*top:-82px;}
#evlos_chr_002 {top:-147px;left:523px;*top:-159px}

5. 搞定底部的圣诞装饰：

> 找一个父元素花费了我最多的时间，所以说父元素是很牛逼的。
> ╮(╯▽╰)╭，找不到强大的父元素，只好自己在 Main 这个左半边的大 DIV 里自己建了个。

#evlos_chr_003 {top:72px;left:-55px;*top:87px;}
#evlos_chr_footer {float:left;width:auto;height:0;}

<!-- Christmas -->
<div id="evlos_chr_footer">
<div id="evlos_chr">
<img id="evlos_chr_003" src="/global/tool/picroom/save/christmas/003.png" />
</div></div>

6. 搞定侧边栏的圣诞装饰：

> #main 和 #sidebar 的 Overflow:hidden 别忘记去掉喔，这个参数的作用是超出元素范围自动隐藏。
> 不然我们相对定位这些图片的时候，只要一移出父元素，图片就看不见了。

> 使用我的”组织“挂件作为父元素，这个是一个文本挂件，所以直接在其 Html 中写入并写上相应的 CSS：

#evlos_chr_004 {top:-312px;left:79px;*top:-316px;}
#evlos_chr_008 {top:8px;left:79px;*top:0;}
#evlos_chr_009 {top:110px;left:79px;*top:98px;}

<!-- Christmas -->
<div id="evlos_chr_sidebar">
<div id="evlos_chr">
<img id="evlos_chr_004" src="/global/tool/picroom/save/christmas/004_Comments.png" />
<img id="evlos_chr_008" src="/global/tool/picroom/save/christmas/008_Orgs.png" />
<img id="evlos_chr_009" src="/global/tool/picroom/save/christmas/009_Tags.png" />
</div></div>

7. 针对 IE6 及以下的 Hack：

> 因为有透明背景的 PNG 在 IE6 及以下版本中不被支持，背景会变成灰底。
> 加上我实在挺不住了，要睡觉去了 ZZzzzzzz ╮(╯▽╰)╭。
> 所以干脆直接对 IE6 用户隐藏我的圣诞装饰了，不去用滤镜了，有时间再搞起来。

<!--[if lte IE 6]>
<link rel="stylesheet"
href="http://www.evlos.org/global/lab/wp-content/themes/elegant-box/ie6.css"
type="text/css" media="screen" />
<![endif]-->

#evlos_chr {height:0;width:0;margin:0px;display:none;}
#evlos_chr img
{background:none;border:none;margin:0;
padding:0;position:relative;display:none;}
#evlos_chr_footer {float:left;width:auto;height:0;display:none;}
#evlos_chr_footer_inner {height:0;width:0;margin:-100px;display:none;}
#evlos_chr_footer_inner img
{background:none;border:none;margin:0;
padding:0;position:relative;display:none;}

8. 欢迎来 Follow 我的 Twitter @AngelSolo 。