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 是默认值.就是按正常的布局流从上到下从左到右布局,平常我们做网页时,没有指定 ...
随机推荐
- jmeter之使用代理录制脚本
从loadrunner到jmeter,录制压力测试脚本好像都只支持IE,近来才知道jmeter还有自带的录制脚本元件, 且支持IE.Chrome及Firefox等多种浏览器.这里就记录一下通过jmet ...
- Laravel collection 报错 join(): Invalid arguments passed
混淆了 array 与 collection,join 并不支持 collection. array 与 collection 不同的 join 实现 collect([1, 2, 3, 4, 5]) ...
- php中静态方法和静态属性的介绍
静态分为两个部分:静态属性和静态方法 静态的东西都是给类用的(包括类常量),非静态的都是给对象用的 静态属性 在定义属性的时候,使用关键字static修饰的属性称之为静态属性. 静态方法 使用stat ...
- 2018-2019-2 网络对抗技术 20165333 Exp4 恶意代码分析
2018-2019-2 网络对抗技术 20165333 Exp4 恶意代码分析 原理与实践说明 1.实践目标 监控你自己系统的运行状态,看有没有可疑的程序在运行. 分析一个恶意软件,就分析Exp2或E ...
- WebApi表头设置跨域
public static class WebApiConfig { public static void Register(HttpConfiguration config) { var setti ...
- win10定时执行php脚本
转自http://www.cnblogs.com/wenhainan/p/6962089.html 第一步:确认windows上是否配置好了php环境变量,我用xampp安装的lamp环境,默认已经配 ...
- A. 【UNR #2】积劳成疾
链接:http://uoj.ac/contest/40/problem/311 题解: 一道很好的期望题吧 用dp的老思路,枚举最大值将序列分割 想到这个就很简单了 状态f[i][j]表示前i个,最大 ...
- sed & awk之sed
sed处理文本的方法 sed在处理文本时,会先读取第一个输入行,将编辑命令应用于输入行,然后读取下一个输入行,并应用编辑命令.sed总是处理最新版本的行,因此sed中有多个编辑命令时,编辑命令的顺序对 ...
- Codeforces 1041F Ray in the tube (看题解)
Ray in the tube 感觉是套路题.. 如果确定一个差值x我们如何取确定答案呢, 我们把a[ i ] -> a[ i ] % (2 * x), 把b[ i ] -> (b[ i ...
- 操作系统概述（os 笔记一）
操作系统概述 操作系统的目标和功能 1.目标:作为用户/计算机接口 计算机的使用人群大致可以分为三类,终端用户,程序开发者,操作系统设计人员. 对于终端用户,即应用程序的用户来说,他们通常不关注计 ...