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& ...
随机推荐
- 三种做法：BZOJ 2780: [Spoj]8093 Sevenk Love Oimaster
目录 题意 思路 AC_Code1 AC_Code2 AC_Code3 参考 @(bzoj 2780: [Spoj]8093 Sevenk Love Oimaster) 题意 链接:here 有\(n ...
- 前端工程师技能图谱skill-map
# 前端工程师技能图谱 ## 浏览器 - IE6/7/8/9/10/11 (Trident) - Firefox (Gecko) - Chrome/Chromium (Blink) - Safari ...
- AWS使用教程
AWS使用教程 一.注册登录(https://portal.aws.amazon.com/billing/signup) 准备资料:信用卡(visa卡).电子邮箱.手机号 1.填写账号名和密码 2.填 ...
- Vue手把手教你撸一个 beforeEnter 钩子函数
地址 :https://www.jb51.net/article/138821.htm 地址 :https://www.jb51.net/article/108964.htm
- css3新增（圆角边框(border-radius)，盒子阴影(box-shadow)，文字阴影(text-shadow)，背景缩放(background-size)）
1.圆角边框 border-radius border-radius 属性用于设置元素的外边框圆角 语法:border-radius:length; 参数值可以是数值 或者 百分比 的形式 正方形, ...
- 微信小程序のwxss
一.wxss简介 wxss是微信小程序的样式文件,同h5框架的css类似,它具有以下特性: 二.外联样式导入 我们可以通过@import引入外部文件的样式 小程序样式是从上到下,从左到右执行的,如果样 ...
- teb-安装
源码:https://github.com/rst-tu-dortmund/teb_local_planner.git 以husky为例子: 1.在gazebo里面配置好机器人底盘的环境 roslau ...
- C stdarg.h
参考:https://www.cnblogs.com/bettercoder/p/3488299.html 博主:运动和行动 va_start宏,获取可变参数列表的第一个参数的地址(list是类 ...
- git的一些简单用法
1.工作区暂存区和仓库区 工作区 对于添加.修改.删除文件的操作,都发生在工作区中 暂存区 暂存区指将工作区中的操作完成小阶段的存储,是版本库的一部分 仓库区 仓库区表示个人开发的一个小阶段的完成 仓 ...
- 笔记66 Spring Boot快速入门（六）
SpringBoot中使用Mybatis 一.注解方式 1.创建映射文件CategoryMapper.java 使用注解@Mapper 表示这是一个Mybatis Mapper接口.使用@Select ...