在滑动滚动条的情况下，div始终定位到当前窗口的中心！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div居中</title>
<style type="text/css">
body,html{height:100%;padding:0;margin:0;}
.divPanel{
border:1px solid red;
width:100px;
height:100px;
left:800px;
top:20px;
position:fixed;
_position:absolute;
_top:expression(eval( document.documentElement.clientHeight==0?(document.body.scrollTop):(document.documentElement.scrollTop))+20+"px");
}
#panel2{
border:1px solid #339966;
width:300px;
width:300px;
height:100px;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-50px;
position:fixed;
_position:absolute;
_left:expression(eval(
document.documentElement.clientHeight==0
?document.body.offsetWidth
:document.documentElement.clientWidth
)/2+"px");
_top:expression(eval(document.documentElement.clientHeight==0?(document.body.scrollTop+document.body.clientHeight/2):(document.documentElement.scrollTop+document.documentElement.clientHeight/2))+"px");
}
</style>
</head>
<body>
<!--
<textarea id="txt1" rows="20" cols="60"></textarea>
<textarea id="txt2" rows="20" cols="60"></textarea>
<textarea id="txt3" rows="20" cols="60"></textarea>-->
<div id="panel" class="divPanel"></div>
<div id="panel2">dddd</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</body>
</html>
分享到：
相关推荐
如果表格嵌套在具有滚动条的div元素内，则需要确保该div元素的宽度不被内部滚动条所影响。具体做法是将div内的表格容器(tableContainer)以及表格主容器(tableMain)的宽度设置为与表格头部(tableMainHead)的宽度一致...
一款jQuery+DIV居中淡入淡出信息提示框示例 7.一款jQuery可拖动提示窗插件(对话框Dialog插件) 8.一款基于jQuery实现的多功能弹出窗插件weebox及示例代码 9.一款支持拖拽的jQuery层弹出窗口(TipsWindown1.0版本...
5. **水平居中导航**：使导航条元素在容器内水平居中，常见方法包括使用`text-align: center`、`display: flex`和`justify-content: center`等。 6. **透明导航**：导航栏背景透明，与页面背景融合。通过调整`...
CSS样式还定义了如`.bank`（用于存放倒影）、`.top`（顶部标题栏）、`.text`（图片下方的文字描述）、`.scrollbar`（滚动条）、`.track`（滚动条轨道）、`.arrow-left`（左箭头）和`.arrow-right`（右箭头）等元素，...
17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码（二） 18.3 在线测试...
17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码（二） 18.3 在线测试...
- 使用CSS可以自定义滚动条的样式，例如颜色、边框等。 8. **动画效果**： - `<MARQUEE>`：创建滚动文本，有多种行为和方向可设置，如滑动、来回滚动、上下左右滚动，以及循环次数和宽度高度的设定。 以上只是...
/* 防止滚动条溢出 */ background-color: rgba(0,0,0,0.4); /* 半透明背景 */ } .modal-content { background-color: #fefefe; margin: 15% auto; /* 居中 */ padding: 20px; border: 1px solid #888; width...
5.4 带滚动条的自动完成 5.5 Combobox风格的自动完成 5.6 读取XML数据的自动完成 5.7 多维数据的自动完成 第6章 jQuery实现拖放功能 6.1 基本拖放功能 6.2 基于事件的拖放 6.3 限制移动范围的拖放 6.4 延迟进行的...
6.13.2 复合样式(滑动条) 6.13.3 柱状图 6.14 切换样式表(网站换肤) 6.15 XHTML与CSS校验 6.15.1 XHTML校验器 6.15.2 CSS校验器 6.16 Flash如何符合标准 第7章 浏览器兼容与解析问题 7.1 CSS hack技术 7.1.1 如何...
- `range`：滑动条。 ##### 3. 常用属性 - `checked`：默认选中。 - `readonly`：只读状态。 - `disabled`：禁用状态。 - `autofocus`：默认聚焦。 - `required`：必填项。 #### 四、其他标签 ##### 1. 字体跑马...
这个头部导航条的样式通过 CSS3 的 `linear-gradient`、`box-shadow` 和 `position:fixed` 实现，使其在页面滚动时始终保持在屏幕顶部。 总的来说，通过结合 HTML、CSS 和 jQuery，我们可以创建出各种动态效果，...