fixed、absolute
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>测试absolute与fixed</title>
<style type="text/css"></style>
<link rel="stylesheet"href="position.css">
</head>
<body style="height:1000px;">
<div id="left">absolute</div>
<div id="right">fixed</div>
</body>
<h1>fixed相对移动的坐标是视图（屏幕内的网页窗口）本身，而absolute相对body坐标原点进行定位</h1>
</html>
div{
width:100px;
height:100px;
background:yellow;
}
#left{
left:0px;
top:100px;
font-size:28px;
position:absolute;
}
#right{
right:0px;
top:100px;
font-size:28px;
position:fixed;
}
h1{
left:0px;
top:100px;
font-size:18px;
}
fixed、absolute的更多相关文章
- Position属性四个值：static、fixed、absolute和relative的区别和用法
Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...
- Position属性四个值：static、fixed、absolute和relative的区别
1.static(静态定位):默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). 2.relative(相对定位):生成相对 ...
- CSS - 定位属性position使用详解（static、relative、fixed、absolute）
position 属性介绍 (1)position 属性自 CSS2 起就有了,该属性规定元素的定位类型.所有主流浏览器都支持 position 属性. (2)position 的可选值有四个:sta ...
- HTML静态网页的格式与布局（position：（fixed、absolute、relative）、分层、float（left、right））
一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例: 二.position:absolute 1.外层没有position:absolute(或r ...
- fixed和absolute的区别
今天在实际项目中,写首页一屏的时候,发现页脚定位(position:absolute:)没有达到我想要的效果(不管屏幕大小,页脚始终相对浏览器底部定位).于是我觉得有点奇怪,然而我旁边的小哥说:很明显 ...
- Position属性四个值：static、fixed、relative、absolute的区别和用法
1.static(静态定位):默认值.没有定位,元素出现在正常的文档流中(如果设置 top, bottom, left, right, z-index这些属性就不起做作了). 2.relative(相 ...
- [转]关于position 的 static、relative、absolute、fixed、inherit
本文转自:http://www.56770.com/faq/list/?id=410 position 有五个值:static.relative.absolute.fixed.inherit. sta ...
- position的static、relative、absolute、fixed、inherit
网上有很多关于position的讲解,也有很多他们属性之间的比较,但是比较全面的讲解还是比较少,每次看完过段时间就忘了,所以今天参考了很多网上现有的资源,自己整理一下,写下这篇文章. position ...
- position 有五个值：static、relative、absolute、fixed、inherit。
position 有五个值:static.relative.absolute.fixed.inherit. static 是默认值.就是按正常的布局流从上到下从左到右布局,平常我们做网页时,没有指定 ...
随机推荐
- 一个shell的面试题
5.写一个脚本,实现判断192.168.1.024网络里,当前在线的D有哪些,能ping通则认为在线,在线输出"TP地址UP",不在线输出TP地址DOWN",无其他输出. ...
- nagios系列(三)之nagios被动监控模式之添加系统负载load、swap、磁盘iostat及memory内存监控详解
环境: nagios server:192.168.8.42 host_name:node4.chinasoft.com nagios client:192.168.8.41 host_name:no ...
- table下tbody滚动条与thead对齐的方法且每一列可以不均等
1 前言 table下tbody滚动条与thead对齐的方法,开始在tbody的td和thead的tr>td,对每一个Item加入百分比,结果是没对齐.也尝试了用bootstrap的col-md ...
- JavaScript的类型自动转换高级玩法JSFuck
0 前言 最开始是不小心在微信公众号(程序员大咖)看到一篇JS的高逼格代码,然后通过里面的链接跳转到了JSFuck的wiki,就像顺着迷宫找宝藏的感觉,感叹JS的自动类型转换的牛逼. 1 样例 (!( ...
- 用命令打开本地tomcat服务器
1.点击开始菜单,搜索cmd,默认第一个结果是cmd.exe, 鼠标右键用管理员权限打开(win7及以上版本系统) 启动命令是net start tomcat8 (我电脑是tomcat8,如果是tom ...
- 使用 HTTP/2 提升性能的几个建议
历史悠久的超文本传输协议,即HTTP标准,最近版本升级了.HTTP/2在2015年5月被批准,目前已经在很多Web浏览器和服务器中得到实现(包括NGINX Plus和开源NGINX).大约有三分之二的 ...
- Mac 安装 JDK
1.访问Oracle官网 http://www.oracle.com,下载 JDK 2.安装JDK 解压 1 中下载的压缩包,在Finder下载目录中双击安装. 或者命令行安装,详见:http://w ...
- Maven实战(Maven+Nexus建立私服【Linux系统】)
准备工作 下载及配置Maven3:http://www.cnblogs.com/leefreeman/archive/2013/03/05/2944519.html 下载Nexus:http://ne ...
- jquery中对父节点和子节点的利用
<tr id='new_tr'> <td id="td_1">td1</td> <td id="td_2">td ...
- python接口自动化测试十五：解决密码动态，无法登录情况
解决问题:每次密码都是变化的,无法通过账号密码登录 (总不能每次去fiddler复制吧????) 解决思路: 1.先用selenium调用浏览器(不会selenium的自己想办法了), 2.登录后从浏 ...