23、css的定位问题
1、positon:relative相对定位
<!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>position:relative定位</title>
<style type="text/css">
html,body,div{
margin:0;
padding:0;
list-style:none;
}
.center{
margin:30px;
border:#999999 solid 10px;
width:400px;
height:300px;
background:#FFFF00;
}
.div1{
width:200px;
height:150px;
background:#0099FF;
position:relative;/*相对于元素本身在文档中应该出现的位置来移动这个元素*/
top:-20px;
left:0px;
}
.div2{
width:400px;
height:150px;
font-size:30px;
font-weight:bold;
color:#fff;
background:#FF0000;
}
</style>
</head> <body>
<div class="center">
<div class="div1">div1</div>
<div class="div2">div2 position:relative定位测试</div>
</div>
</body>
</html>
2、postion:absolute绝对定位
<!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>position:absolute定位</title>
<style type="text/css">
html,body,div{
margin:0;
padding:0;
list-style:none;
}
.center{
margin:30px;
border:#999999 solid 10px;
width:400px;
height:300px;
}
.div1{
width:200px;
height:200px;
background:#0099FF;
/*设定TRBL //设定了absolute之后，会相对于static定位以外的第一个父元素进行定位
1、当设定了left和top时会根据浏览器左上角来进行定位，
2、否则会根据其父元素的左上角来进行定位
*/
position:absolute;
left:0px;
top:0px;
}
.div2{
width:400px;
height:300px;
font-size:30px;
font-weight:bold;
color:#fff;
background:#FF0000;
}
</style>
</head> <body>
<div class="center">
<div class="div1"></div>
<div class="div2">position:absolute定位测试</div>
</div>
</body>
</html>
3、 这回是真的定住不动啦
<html>
<head>
<base href="<%=basePath%>">
<title>My JSPstarting page</title>
<style type="text/css">
div{
width:50%;
height:150px;
position:absolute;
top:200px;
left:10px;
background-color: blue;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var top=$("#fixed").offset().top;
$(window).scroll(function(){
var offset = top + $(document).scrollTop();
$("#fixed").offset({top:offset});
})
})
</script>
</head>
<body>
<div id="fixed">
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br> sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br> sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br> sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br> sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br> sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br> sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br> sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br> sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br> sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br> sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br> sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br> sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br>
sdfsd<br> </div>
</body>
</html>
23、css的定位问题的更多相关文章
- css绝对定位问题
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 3月23.CSS表格布局
360表格布局: CSS定义标签: @charset "utf-8";/* CSS Document */.bt1{ border:#309 solid 1px; height:1 ...
- 23 , CSS 构造列表与导航
1. 列表图片 2. 背景列表 3. 翻转列表 4. 水平导航 1. 内边距与外边距 Ul { Margin: 0; Padding: 0; } 2. 使用图片作为列表图标 Ul { Margin: ...
- CSS的定位问题总结
CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许 ...
- CSS中定位问题
通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式. position 属性值的含义: static 元素框正常生成.块级元素生成一个矩形框,作为文档流的一 ...
- div+css页面右侧底部悬浮层
效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...
- IE和firefox火狐在JS、css兼容区别
1.firefox不能对innerText支持. firefox支持innerHTML但却不支持innerText,它支持textContent来实现innerText,不过默认把多余的空格也保留了. ...
- FF与IE对JavaScript和CSS的区别
一.FF与IE对JavaScript的区别 1. document.formName.item("itemName") 问题 说明:IE下,可以使用document.formNam ...
- Firefox 与 IE 对Javascript和CSS的区别
1. document.formName.item("itemName") 问题 说明:IE下,可以使用document.formName.item("itemName& ...
随机推荐
- SQL Server数据库备份&还原
一.备份 1.登录数据库 2.找到要还原的数据库 右键-任务-备份-添加(路径只写一个,刚开始二个总是报错)-确定 二.还原数据库 这个之间报错了二次 1.报错1:备份集中的数据库与现有数据库“XXX ...
- uploadify的使用错误
在看singwa的视频教程中,学习使用hui-admin模版,在使用uploadify插件上传图片中出现错误. ReferenceError: Can't find variable: $因为使用JQ ...
- 前端每日实战：80# 视频演示如何用纯 CSS 创作一个自行车车轮
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/XBXEPK 可交互视频 此视频是可 ...
- PHP-文件和目录操作
目录操作 创建目录:mkdir(目录地址, 权限, 是否递归创建 = false); 删除目录:rmdir(目录地址);(仅仅可以删除空目录,不支持递归删除) 移动(改名):rename(旧地址, 新 ...
- Linux基础-文件管理
<1>查看文件信息:ls ls是英文单词list的简写,其功能为列出目录的内容,是用户最常用的命令之一,它类似于DOS下的dir命令. Linux文件或者目录名称最长可以有265个字符,“ ...
- JVM（1）：Java 类的加载机制
原文出处: 纯洁的微笑 java类的加载机制 1.什么是类的加载 类的加载指的是将类的.class文件中的二进制数据读入到内存中,将其放在运行时数据区的方法区内,然后在堆区创建一个java.lang. ...
- 数据可视化----matplotlib.pylot
一.输入具体数 plt.plot([3,1,4,5,2]) #自动生成y轴 plt.ylabel("Grade") #y轴的标签 plt.savefig('test1',dpi=6 ...
- IOU计算python实现
def compute_iou(rec1, rec2): """ computing IoU :param rec1: (y0, x0, y1, x1), which r ...
- multipart/form-data，application/json和application/x-www-form-urlencoded区别
application/json和application/x-www-form-urlencoded都是表单数据发送时的编码类型. EncType: enctype 属性规定在发送到服务器之前应该如何 ...
- android 数据异步加载
public class MainActivity extends Activity { ListView listView; File cache; //访问其他线程在当前线程中存放的数据 Hand ...