ul 原点显示_固定元素（div、ul li）显示在屏幕左上角、右下角、中间

在网页前端设计时，有时需要固定元素在屏幕的左上角、右下角或中间，也就是被固定的元素不能随屏幕移动。固定元素通常用来显示广告、快捷菜单、导航、简短新闻、在线客服等。由于固定的常常是一个小区块，所以经常选择 div 作为固定元素，行多时也选用 ul li。

固定元素在屏幕某个位置有两种方法实现，既可用 javascript 代码，又可用 CSS 样式；用 javascript 代码实现复杂得多，以前一些浏览器不支持 CSS 固定元素在屏幕某个位置，需要用 javascript 代码辅助，现在几乎所有浏览器都支持 CSS 样式固定元素了，所以用 CSS 就可以了，实现简单快捷方便。但固定到屏幕中间仍然需要用 javascript，CSS无法根据屏幕大小准确定位。

一、固定元素(div、ul li)显示在屏幕左上角

htm代码：

固定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在屏幕右下角

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在屏幕中间

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);

效果图：