固定元素（div、ul li）显示在屏幕左上角、右下角、中间
在网页前端设计时，有时需要固定元素在屏幕的左上角、右下角或中间，也就是被固定的元素不能随屏幕移动。固定元素通常用来显示广告、快捷菜单、导航、简短新闻、在线客服等。由于固定的常常是一个小区块，所以经常选择 div 作为固定元素，行多时也选用 ul li。
固定元素在屏幕某个位置有两种方法实现，既可用 javascript 代码，又可用 CSS 样式；用 javascript 代码实现复杂得多，以前一些浏览器不支持 CSS 固定元素在屏幕某个位置，需要用 javascript 代码辅助，现在几乎所有浏览器都支持 CSS 样式固定元素了，所以用 CSS 就可以了，实现简单快捷方便。但固定到屏幕中间仍然需要用 javascript，CSS无法根据屏幕大小准确定位。
一、固定元素（div、ul li）显示在屏幕左上角
htm代码：
<div class="lifeTop">固定div在屏幕左上角</div>
CSS样式：
.lifeTop{width:100px; height:200px; border:1px solid #ccc; position:fixed; _position:absolute; left:20px; top:30px; padding:4px;}
效果图：
图1
div 被固定到屏幕的左上角，主要设置它离屏幕左边和上边的距离，即：left:20px; top:30px;，这个距离也可以用百分比。把 ul li 固定到屏幕的左上角方法一样，只需把 CSS 样式 lifeTop 用于 ul 即可。
二、固定元素（div、ul li）显示在屏幕右下角
htm代码：
<div class="rightBottom">固定div在屏幕右下角</div>
CSS样式：
.rightBottom{width:100px; height:200px; border:1px solid #ccc; position:fixed; _position:absolute; right:10px; bottom:10px; padding:4px;}
效果图：
图2
div 被固定到屏幕的右下角，主要设置它离屏幕右边和底边的距离，即：right:10px; bottom:10px;。
三、固定元素（div、ul li）显示在屏幕中间
htm代码：
<div id="divId" class="middle">固定div在屏幕中间</div>
CSS样式：
.middle{width:300px; height:300px; border:1px solid #ccc; position:fixed; _position:absolute; left:0px; top:0px; padding:4px;}
由于单独用 CSS 样式无法实现，所以需要用 javascript，代码下如：
//objWidth为div的宽度，objHeight为div的高度
function divMiddle(objWidth, objHeight) {
var obj = document.getElementById("divId");
var screenWidth = window.screen.width;
var screenHeight = getRealHeight();
obj.style.left = (screenWidth - objWidth) * 0.5 + "px";
obj.style.top = (screenHeight - objHeight) * 0.5 + "px";
}
//获取浏览器可视区的高度
function getRealHeight() {
var realHeight = 0;
if (document.compatMode == "CSS1Compat") {
realHeight = document.documentElement.clientHeight;
} else {
realHeight = document.body.clientHeight;
}
return realHeight;
}
调用：divMiddle(300, 300);
效果图：
