- 浏览: 1481507 次
- 性别:
- 来自: 深圳
文章分类
- 全部博客 (595)
- Java咖啡厅 (208)
- IT杂侃 (23)
- 程序员笑话 (7)
- 我的后现代文学 (1)
- WEB编程 (116)
- 软件评测 (8)
- 操作系统 (3)
- 炫目Ruby (2)
- 行业知识 (7)
- 我的动漫情结 (6)
- 其他 (8)
- Window DIY (6)
- 古文学 (3)
- 转载文章 (2)
- IT百科 (7)
- 动态网页Active (1)
- 文档 (1)
- 设计理论 (11)
- .NET 快速开发 (18)
- 英语学习 (6)
- 网站分析 (2)
- 开源软件 (4)
- 数据库 (28)
- 笔记 (4)
- 源代码共享 (8)
- IT人物 (2)
- 软件管理 (10)
- 小说创作 (0)
- 大众软件 (12)
- 网站评论 (3)
- 小虾乱说 (10)
- 游戏 (8)
- 心情 (3)
- 娱乐休闲 (2)
- Delphi编程 (1)
- PHP编程 (4)
- 中间件 (2)
- 移动开发 (2)
- Office应用 (2)
- Photoshop (1)
- Eclipse (5)
- 面试题 (1)
- 手机评测 (0)
- VBScript (1)
- WEB前端-EXT (3)
- 吐槽 (1)
- Java咖啡厅 Ibatis (1)
- javascript Ext (1)
- jquery ui (1)
- require (1)
- WEB编程 Javascript (1)
- jquery (1)
- Swing (1)
- 分布式 (1)
最新评论
-
zhangjihao:
28. 下面哪个Set是排序的? A. LinkedHas ...
Java面试题(选择题) -
zhangthe9:
ICMP报文被封装在IP包里,也就是说他是由IP协议承载的,从 ...
Java面试题(选择题) -
zhunengfei:
真的假的?
自已写的jquery ui框架 -
white_crucifix:
少年,发烫是所有智能手机的特点,而莫名发烫是所有安卓手机的特点 ...
【吐槽】三星手机的OS是一砣屎 -
suzu88:
试了一下,可以用。如果美化一下控件和窗体更有意思。
一个用XML构建Swing视图的框架
一、定位的基本概念
一般我们定位元素都使用绝对定位,因为绝对定位是最容易掌握的定位方式。但结合其他定位方式,我们可以设计更加灵活的页面。
CSS控制定位的属性为:Position
CSS中关于定位(position)是这样定义的:
定位(position):允许用户精确定义元素框出现的相对位置,可以相对于它通常出现的位置,相对于其上级元素,相对于另一个元素,或者相对于浏览器视窗本身。每个显示元素都可以用定位的方法来描述,而其位置由此元素的包含块来决定的。
他的允许值有三个:static,relative和absolute
static为默认属性。relative为相对定位,absolute为绝对定位。
static : 默认值。无特殊定位,对象遵循HTML定位规则
absolute: 将对象从文档流中拖出,使用 left , right , top , bottom
等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。
如果不存 在这样的父对象,则依据 body 对象。而其层叠通过
z-index 属性定义 fixed : 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative : 对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置
检索对象的定位方式。设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠。此时对象不具有外补丁( margin ),但仍有内补丁( padding )和边框( border )。
要激活对象的绝对(absolute)定位,必须指定 left , right , top , bottom 属性中的至少一个,并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ,这将导致对象遵从正常的HTML布局规则,在前一个对象之后立即被呈递。设置此属性值为 relative 会保持对象在正常的HTML流中,但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的,在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外,滚动条不会出现。内容的尺寸会根据布局确定对象的尺寸。例如,设置一个 div 对象的 height 和 position 属性,则 div 对象的内容将决定它的宽度( width )。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 position 。
二、各种定位区别
1. 相对定位
相对定位是一个非常容易理解的概念,如果对一个元素进行相对定位,它将在他所在的位置上,然后可以通过设置垂直和水平的位置,让这个元素‘相对于’起点进行移动,如果将top 设置为20px,那么框就会出现在原位置顶部下面20px的地方,如果将left 设置为20px 那么框就会向右移动20px
#mybox{ Position:relative; Top:20px; Left:20px; }
如下图:
使用相对定位时,无论是否进行移动,元素仍然占据原来的空间,因此移动元素会导致它覆盖其他框。
2.绝对定位
相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。与之相反,绝对定位使元素的位置与文档流无关,因此不占据空间。普通文档流中其他元素的布局就像绝对定位的元素不存在时一样。 把相对定位中的代码改成absolute 则会变成这样:
绝对元素的位置相对于最近已定位的祖先元素。如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。根据用户代理的不同,最初的包含块。根据代理的不同可能是画布或HTML。 与相对定位的框一样,绝对定位的框可以从它的包含块向上,下左,右移动。这提供了很大的灵活性。可以直接将元素定位在页面上的任何位置。 因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素,可以通过设置z-index属性来控制这些框的堆放次序。Z-index值越高,框在堆中的位置就越高。
发表评论
-
AJAX
2019-06-12 22:41 745Ajax 全名为Asynchronous Javas ... -
Webpack入门配置
2019-01-05 15:33 3137Webpack是一个强大前端集成工具,它在Nodejs的基础 ... -
解决Jetty做Web容器时,修改JS或HTML出错的问题
2018-07-03 18:28 1005解决的方法 1. 进入jetty的安装目录 ... -
用JQuery做的一个分页效果
2018-05-28 02:29 2238这个效果主要使用jquery来实现, 每次显示 ... -
Vue自已写的日历插件
2018-05-07 12:36 6360自已写的日历插件,还在优化中,后续会陆续更新。 ... -
无刷新上传文件的方法
2018-04-15 00:05 776这里使用jquery.form.js的方法 1. ... -
zrender学习点滴
2018-01-21 20:37 1728Zrender是一个二维绘图引擎,它提供了Canvas,S ... -
原创程序- Web版数据库管理
2017-11-15 00:39 1105这是我自已写的Web版的数据库管理工具,主要是依赖于JDBC ... -
Vue学习点滴
2017-09-23 22:11 6781. 循环 v-for="(item, ... -
Eclipse创建Web项目
2017-07-29 10:53 7141. 打开创建Web项目的对话框 2 ... -
HTML5 新增功能收集
2017-04-29 03:18 608HTML 5是HTML发展以来最大的一次变革,相比其 ... -
Bootstrap学习记录点滴
2017-04-28 00:56 8511. 学习Bootstrap必进的学习网站 ... -
关于地图显示的一些知识
2017-02-18 23:34 8521. 墨卡托(Mercator)投影 墨卡 ... -
CSS知识记录点滴
2017-02-05 11:06 5391. 元素无法选择 -webkit-u ... -
用JS制作3D效果布局
2016-12-04 22:18 25这是用JS做的一个3D布局效果的程序, 目前还是研究 ... -
tntxiawebmvc 做国家管理的系统
2016-11-19 18:21 8101. 首先我们先增加一个Web项目 如图:我们在左 ... -
jtopo学习记录
2016-11-13 13:34 14651. 通过JSON的格式来创建结点: $(funct ... -
Html 5 Canvas 学习记录
2016-11-13 10:28 5431. stroke beginPath endPat ... -
jquery杂记
2016-08-11 19:11 6421. $ 的作用 $ 在jquery里面有两 ... -
自已写的jquery ui框架
2016-03-08 23:53 1472这个是自已写的一个jquery ui的插件,目的是 ...
相关推荐
/*用绝对定位抽离正常文本流,不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/ top:5px;/*这里的5px是与信息面板大盒子的填充一样的*/ left:5px; } dl { width: 160px; float:right; color: #999; line-...
对定位属性值进行详解,和...在本文中,任何一个元素都被文本流所限制了自身的位置,但是通过CSS我们依然使得这些元素可以改变自己的位置,我们可以通过float来让元素浮动,我们也可以通过margin来让元素产生位置移动。
CSS 定位网页元素
CSS教程——元素定位CSS教程——元素定位
CSS设置元素width=100%失效的一种解决方式(该元素的父元素为body)
伪元素实现tooltip,nav导航栏的炫酷效果以及计数器
css 相对定位 设置为相对定位的元素框会偏移某个距离。元素仍然保持其为定位前的形状,它原本所占的空间仍保留。...使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
1.需要对网页进行设计,可以使用传统的div+css设计,里面的元素可以使用position定位,或者float定位,或者flex布局。 2.需要使用css3中的至少两种效果,并且用到css3的地方请注释,例如阴影效果,动画效果,2D转换...
1、定位元素(positioned element)是计算后位置属性分为: relative(相对)、absolute(绝对) 、 fixed(固定) 或 sticky (粘性)的元素。 2、top 、right、bottom、left属性指定定位元素的位置。 3、Z-index ...
CSS元素的浮动与定位综合案例3.pdf 学习资料 复习资料 教学资源
本文介绍了css中子元素设置margin-top为什么影响了父元素,分享给大家,具体如下: <style type="text/css"> *{ margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; height: ...
在本文流中,任何一个元素都被文本流所限制了自身的位置,但是通过CSS我们依然使得这些元素可以改变自己的位置,我们可以通过float来让元素浮动,我们也可以通过margin来让元素产生位置移动。但是事实上那并非是真实...
①CSS 行内元素 ②CSS 区块元素 ③CSS 内联块元素
主要介绍了CSS实现定位元素居中的方法,主要涉及到transform和margin的使用,需要的朋友可以参考下
css定位 html元素定位 static relative absolute fixed详细讲解,带图。
这可能不是直接父元素,如果 AP 元素的父元素使用静态定位,即不会被认为是已定位的,所以 AP 元素在文档树中继续向上寻找已定位的祖先。可能会一直沿着文档树向上寻找,直到找到 body 元素(它被认为是已定位的),并...
让我们通过完成一下的实例来了解一下如何在不使用无用的class和id属性的情况下利用CSS3定位页面元素。 相关下载:CSS3.0参考手册下载使用一个唯一的日志(post)ID定位所有日志 wordpress提供给我们一种包含了ID的每篇...
作用:检索或者设置元素的定位方式(改变元素位置的属性) *定位分为静态定位,绝对定位,相对定位,固定定位,粘性定位* (1)static 静态定位: position的默认值,默认文本流的状态。 不会识别left ...
css-animator, 使用支持 Angular的CSS类对元素进行动画处理 css动画在 animate.css 库中使用CSS动画,在没有可用的动画生成器的情况下,这个包是created的。CSS动画程序适用于任何JavaScript应用程序,并且不需要...
基于文档流解读html元素的(css)定位形式 每个非浮动块级元素都独有一行, 浮动元素则按规则浮在行的一端. 若当时行容不下, 则另起新行再浮动。 内联元素也不会独有一行. 简直一切元素(包括块级,内联和列表元素)均...