如何让div固定在页面的某个位置_安全

用绝对定位或相对定位

absolute 使用示例如下,左上角为(0,0):

<!DOCTYPE html>
<html lang="en" xmlns=";

运行效果:

使用关键代码：overflow-y: auto，并且限制高度实现功能。

实例演示如下：

1、Html代码如下：一个简单的div，暂时内容为空。

css样式如下：

此时页面展示如下：

2、在第一步div加入一些文字，如下：

此时页面展示如下：已自动展现滚动条。

扩展资料：

CSS的overflow 属性解析：

1、定义和用法。

overflow 属性规定当内容溢出元素框时发生的事情。

2、兼容性（浏览器支持）。

所有主流浏览器都支持 overflow 属性，任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

3、属性说明。

属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

可能的值如下：

可以用position的fixed属性，这个属性的功能就是使元素的定位方式为固定的，这样就可以让div不随滚动条滚动而改变位置。

下面举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>主页</title>
 <style>
 #cen
 {
 position: fixed;
 left: 10px;
 top:100px;
 width: 100px;
 height: 100px;
 background-color: aqua;
 }
 </style>
</head>
<body>
<div id="cen"></div>
 
 
 
 
 
 
 
 
 
</body>
</html>

<body>
<div id="div1" style="width:100px; height:100px; background:#ccc";></div>
</body>
<script>
var oDiv = documentgetElementById('div1');
oDivstyleposition = 'fixed';
oDivstyletop = '20px';
oDivstyleleft = '20px';
</script>
主要思想就是，在js中修改div的位置。所有的赋值，都可以计算后再传值，这样就不想CSS中只能写一个值了。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/yw/12938973.html

如何让div固定在页面的某个位置

发表评论

评论列表（0条）