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 是默认值.就是按正常的布局流从上到下从左到右布局,平常我们做网页时,没有指定 ...
随机推荐
- 在Linux上安装go-gtk
由于Linux的Gnome桌面就是用GTK编写的,所以,Linux本身就包含GTK工具库,安装GTK工具库在线安装即可. 第一步:在终端输入: sudo apt-get install libgtk3 ...
- mysql 5.6 在线 DDL
原文链接地址:http://seanlook.com/2016/05/24/mysql-online-ddl-concept/ 做MySQL的都知道,数据库操作里面,DDL操作(比如CREATE,DR ...
- mysql的undo log和redo log
在数据库系统中,既有存放数据的文件,也有存放日志的文件.日志在内存中也是有缓存Log buffer,也有磁盘文件log file,本文主要描述存放日志的文件. MySQL中的日志文件,有这么两 ...
- C++ one more time
写在前面:我们学习程序设计的方法先是模仿,然后举一反三.在自己的知识面还没有铺开到足够解决本领域的问题时,不要将精力过分集中于对全局无足轻重的地方!!! 以下参考钱能老师的<C++程序设计教程 ...
- poj2464扫描线好题，回头再做
扫描线+区间更新 题解 /* st[i],ol[i]表示y坐标大于y[i]和小于y[i]的点 两颗线段树建立在y轴上,区间[l,r]ol线选在[l,r]时st的分数 每次查询完成后再更新一次 遍历每条 ...
- js获取当前有效样式
js获取有效样式 节点.currentStyle["属性名"] 兼容ie方法(只有ie有效) getcomputedStyle(节点)["属性名&q ...
- Ubuntu 里面 apt-get 三个有关更新的命令的区别
apt-get update 更新软件源中的所有软件列表. apt-get upgrade 更新软件. apt-get dist-upgrade 更新系统版本. 作者:耑新新,发布于 博客园 转载请 ...
- Maven的下载，安装，配置，测试，初识以及Maven私服
:Maven目录分析 bin:含有mvn运行的脚本 boot:含有plexus-classworlds类加载器框架 conf:含有settings.xml配置文件 lib:含有Maven运行时所需要的 ...
- springmvc返回中文乱码问题
关于springmvc的返回中文乱码的问题,网上可谓是清一色的一样,无外乎就两种,要么在局部类或这方法上解决,类似如下的代码: @GetMapping(value="/error/query ...
- Codeforces 757D - Felicity's Big Secret Revealed
757D - Felicity's Big Secret Revealed 题目大意:给你一串有n(n<=75)个0或1组成的串,让你划最多n+1条分割线,第一条分割线的前面和最后一条分割线的后 ...