网站前端地图定位插件定位之后怎么清除相对定位

来源：蜘蛛抓取(WebSpider) 时间：2016-08-26 05:41 标签： 相对定位
前端免费教程
慕课网（IMOOC）是学习编程最简单的免费平台。慕课网提供了丰富的移动端开发、php开发、web前端、html5教程以及css3视频教程等课程资源。它富有交互性及趣味性，并且你可以和朋友一起编程。
jQuery API中文文档
适用jQuery 1.0 – jQuery 1.10.2,jQuery 2.0 – jQuery 2.0.3，翻译至官方文档，并且跟随官方文档持续更新。
跟牛人学前端
跟牛人学前端
前端最新课程体系
妙味课堂2016年JavaScript课程大纲震撼升级、全栈来袭！
前端最新干货
前端最新干货
您的位置： » 分类:
» 文章: div+css绝对定位和相对定位
很多朋友问过我absolute与relative怎么区分，怎么用？我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么样的特性，可以做出什么样的效果呢？关于两者之间又有什么样的技巧呢？下面我们就来一一解读。
Absolute，CSS中的写法是：position: 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。
一般来讲，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似，但是还是有本质的区别的。
Relative，CSS中的写法是：position:
他的意思是相对定位，他是参照父级的原始点为原始点，无父级则以文本流的顺序在上一个元素的底部为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。
有时我们还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。但是z-index也不是万能的，z-index也受到了等级的限制，关于这个等级的限制请查看《》
This entry was posted in . Bookmark the .
您可能感兴趣的文章
近期最热文章
- 3,614 - 1,368Position:relative/absolute/static/fixed
1、relative:表示相对，他通过left、right、top、bottom属性确定元素正常文档流中的偏移位置需要结合left、right、top、bottom四个属性联合使用。
2、absolute:表示绝对，将元素从文档流中拖出来，然后使用left、right、top、bottom属性对于最近的一个具有定位属性的父包含块进行定位。如果不存在这样的包含块，则相对与body元素，及根据浏览器窗口，而其层叠顺序则通过z-index属性来定义
包含块是绝对定位的基础，包含块就是为绝对定位元素提供坐标偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比长度的参考。
默认状态下，body是一个大的包含块，所有绝对定位的元素都是根据窗口来去定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来决定自己的显示位置。
z-index用来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。当然有一点要注意，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。
3、static:表示不定位，元素遵循HTML默认的流动模型，如果未显示声明元素的定位类型，则默认为该值。
4、fixed:表示固定定位与absolute类似但是他的包含块是窗口，他不会随着浏览器窗口的滚动条滚动而变化。
absolute与relative怎么区分，怎么用？
我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么样的特性，可以做出什么样的效果呢？关于两者之间又有什么样的技巧呢？
Absolute，CSS中的写法是：position: 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。
Relative，CSS中的写法是：position:
他的意思是相对定位，他是参照父级的原始点为原始点，无父级则以相对于它的起点为原始点移动，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。
设置此属性值为 relative 会保持对象在正常的HTML流中，但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的，在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。其实对于定位的主要问题是要记住每个定位的意义。相对定位是“相对于“元素在文档流中初始位置的，而绝对定位是”相对于“最近的已经定位的祖先元素。
分享到： ()<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&前端开发相对定位和绝对定位的应用
　　&相信在初学前端的时候很多初学者都因为相对定位和绝对定位烦恼过。在用DIV+CSS控制排版过程中，定位一直被人认为是一个难点，这主要是表现为很多网友在没有深入理解清楚定位的原理时，排出来的杂乱网页常让他们不知所措，而另一边一些高手则常常借助定位的强大功能做出些很酷的效果来，比如CSS相册等等，因此自己杂乱的网页与高手完美的设计形成鲜明对比，这在一定程度上打击了初学定位的网友，也在他们心目中形成这样的一种思想：当我熟练地玩转DIV+CSS定位时，我就已是高手了。不管你怎么想，我只希望下面的教程能让你更深入地了解CSS定位属性
1.定位的专业解释
　　(1)语法
　　position:static|absolute|fixed|relative
　　(2)说明
　　从上面语法可以看出，定位的方法有很多种，它们分别是静态(static)，绝对定位(absolute)，固定(fixed)，相对定位(relative)。在这个教程里，我不逐一讲，只讲最常用也是最实用的两个定位方法：绝对定位(absolute)、相对定位(relative)。
　　绝对定位(absolute)：将被赋予此定位方法的对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据body对象左上角作为参考进行定位。绝对定位对象可层叠，层叠顺序可通过z-index属性控制，z-index值为无单位的整数，大的在最上面，可以有负值(目前负值FF不支持)。
　　相对定位(relative)：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。
2.定位的形象解释
　　我先来架设一个虚拟的场景：有一个矩形的房间，里面还有一个水桶装了些水，水里还浸泡着一个西瓜，这个房间半空中还有不少的钩子用于挂东西用。现在我把网页元素与上面物件对应上，那么房间就是一个网页，水桶是网页中的一个板块，桶中的水就是文本流，西瓜就是将要被定位的对象。
　　(1)贡献的绝对定位(absolute)
　　对照前面解释，如果西瓜被赋予绝对定位，那么就等于把西瓜从水中捞起来挂在半空中的钩子上，水桶中西瓜原来占用的空间水会自动填补它(绝对定位对象会让出自己原先占用位置，所以说它是贡献的)。此时如果之前没有对水桶进行定位设定，那么被拿起的西瓜位置不会再受水桶位置影响，水桶怎么移动，西瓜还是挂在原来位置，至于西瓜要怎放，则以房间左上角(body左上角)为准，用left，right，top，bottom值来定位。
　　但是如果水桶也给出了定位设置(通常是相对定位，下面有讲到这一实用技巧)，此时西瓜的摆放就没有那么自由了，尽管此时西瓜被拿起来了不会影响水桶中的水(文本流)，但它还是要听桶的话，桶会告诉西瓜“你可以活动，但应该在我的范围内走动，比方说我要你在我左上方1米处，你就要跟死这一点，我走你也要跟着走”，如果桶中有很多个西瓜，可以全部拿出来吊到半空中，它们将被安排在不同高度的空间(层)，所以在房顶垂直往下看，有可能看到不同西瓜层叠在一起的情况(这个所谓的高度在网页中是不存在的，就像FLASH动画中的不同层上安排了元素，但它们在看时不会有深度感觉)。可见绝对定位的对象参考目标是它的父级，专业称之为包含块。
　　(2)自私的相对定位(relative)
　　相对定位一个最大特点是：自己通过定位跑开了还占用着原来的位置，不会让给他周围的诸如文本流之类的对象。相对定位也比较独立，做什么事它自己说了算，要定位的时候，它是以自己本身所在位置偏移的(相对对象本身偏移)。再拿前边作比如来解，那么此时西瓜似乎是有魔法的，如果西瓜通过相对定位在水桶中偏移了你会看到一个现实生活中不存在的现象：水中有一个地方水凹下去了，周围的水不能填补它，西瓜看起来在旁边，如果搅动一下桶中的水，那个凹的位置会发现改变(文本流对相对定位对象还存在影响)，但是凹处到西瓜出现的距离始终保持一致。可见文本流与它之间还会互相影响，因为对象并没有真正脱离文本流，就像有两个人在同一层楼水平移动的过程中会有碰头的机会。
　　(3)总结两种定位的特征
　　绝对定位就像是把不同对象安排到了一栋高楼的不同楼层(一般指不是第一层，我们这里理解为文本流就放在首层)，它们互不影响，但是它们怎么移动与你楼的地基和面积(父级)有关。相对定位指对象还是在首层楼与文本流一起存放，它们之间肯定存在影响。
　　(4)对特殊情况的补充
　　在用相对定位和绝对定位的时候，有一种情况是它们的定位值用到了负值则对象可沿相反方向移动，刚才说到的把对象安排在一栋楼的不同层，如果某个对象一开始就是背靠着最外边墙的，此时再用一个负值定位它，它就会神奇般地跑出墙外去了，当然现实中可没有这种惊险而又神奇的事发生。。。。呵呵哒
web前端免费学习视频资料群：
我的更多文章：
( 20:53:44)( 19:16:56)( 11:21:45)
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。前提：公司最近做的一个项目列表，然后点击项目，出现背景遮罩层，弹出的数据框需要异步加载数据数据，让这个数据框居中，搞了两天终于总算达到Boss满意的程度，做了半年C/S，反过来做B/S，顿时感到技术还是需要不断使用，不然就是个废，先来一步一步的分析：
点击有背景层，然后有数据框：
1.背景层和数据框都是两个已经在页面中存在的Div,响应点击事件获取参数就可以
1 &!DOCTYPE html&
2 &html xmlns="http://www.w3.org/1999/xhtml"&
4 &meta http-equiv="Content-Type" content="text/ charset=utf-8"/&
5 &title&&/title&
6 &script src="Scripts/jquery-1.7.1.js"& &/script&
7 &script type="text/javascript"&
8 $(function () {
9 $("#test").click(function () {
10 var height = $(document).height();
11 var width = screen.
12 var pWidth = $("#dataDialog").width();
13 var pHeight = $("#dataDialog").height();
14 var top = (height - pHeight) / 2;
15 var left = (width - pWidth) / 2;
16 $("#testBg").css({
17 "width": width,
18 "height": height,
19 "display": "block"
21 $("#dataDialog").css({
22 "top": top,
23 "left": left,
24 "display": "block"
29 &/script&
30 &/head&
32 &div id="testBg" style="background:position:top:0left:0z-index:1;display:opacity:0.8"&&/div&
33 &a href="javascript:void(0);" id="test"&背景层测试&/a&
34 &div id="dataDialog"style="background:z-index:5;display:width:400position:"&
35 &table border="1" style="border:1border-collapse:"&
36 &tr&&td style="width:100"&姓名&/td&&td style="width:300"&个人简介&/td&&/tr&
37 &tr&&td id="name"&小飞象&/td&&td id="resume"&才毕业的菜鸟级别的人，总是犯一些未知活已知的错误，需要给出自己的判断力，加强自己的执行力，你需要不断的去把控自己，给出所有的问题一个正确的解决方式
38 &/td&&/tr&
39 &/table&
42 &/body&
43 &/html&
背景层的样式style="background:position:top:0left:0z-index:1;display:opacity:0.8"稍微说下(如果你是前端已经很强可以忽略我)，background控制背景颜色，opacity设置透明度，两个算是哥俩一块用，top，left设为0背景是整个页面，;position:absolute设为绝对，设为z-index的数值是叠加时候的顺序，小的在下面~
数据框样式style="background:z-index:5;display:width:400position:"其中z-index比背景层的数值大就行.
2.上面的代码数据框是居中的，没有任何问题，现在需要异步加载一下数据，填充数据后台返回JSON格式的字符串
1 &!DOCTYPE html&
2 &html xmlns="http://www.w3.org/1999/xhtml"&
4 &meta http-equiv="Content-Type" content="text/ charset=utf-8"/&
5 &title&&/title&
6 &script src="Scripts/jquery-1.7.1.js"& &/script&
7 &script type="text/javascript"&
8 $(function () {
9 $("#test").click(function () {
10 var height = $(document).height();
11 var width = screen.
12 $.get("/About.aspx", "type=test&Id=1", function (data) {
13 var str = JSON.parse(data);
14 $("#name").html(str.name);
15 $("#resume").html(str.resume);
17 var pWidth = $("#dataDialog").width();
18 var pHeight = $("#dataDialog").height();
19 var top = (height - pHeight) / 2;
20 var left = (width - pWidth) / 2;
21 $("#testBg").css({
22 "width": width,
23 "height": height,
24 "display": "block"
26 $("#dataDialog").css({
27 "top": top,
28 "left": left,
29 "display": "block"
34 &/script&
35 &/head&
37 &div id="testBg" style="background:position:top:0left:0z-index:1;display:opacity:0.8"&&/div&
38 &a href="javascript:void(0);" id="test"&背景层测试&/a&
39 &div id="dataDialog"style="background:z-index:5;display:width:400position:"&
40 &table border="1" style="border:1border-collapse:"&
41 &tr&&td style="width:100"&姓名&/td&&td style="width:300"&个人简介&/td&&/tr&
42 &tr&&td id="name"&小飞象&/td&&td id="resume"&才毕业的菜鸟级别的人，总是犯一些未知活已知的错误，需要给出自己的判断力，加强自己的执行力，你需要不断的去把控自己，给出所有的问题一个正确的解决方式
43 &/td&&/tr&
44 &/table&
47 &/body&
48 &/html&
死就死在这个上面，这个页面出现的数据框是无法居中的，一直搞了很久，各位有看出问题的直接可以闪人，没看出来可以自己思考下，没想出来直接看第三段~
3.柳暗花明，尘归尘，土归土，代码的顺序，看源码：
1 &!DOCTYPE html&
2 &html xmlns="http://www.w3.org/1999/xhtml"&
4 &meta http-equiv="Content-Type" content="text/ charset=utf-8"/&
&title&&/title&
&script src="Scripts/jquery-1.7.1.js"& &/script&
&script type="text/javascript"&
$(function () {
$("#test").click(function () {
var height = $(document).height();
var width = screen.
$.get("/About.aspx", "type=test&Id=1", function (data) {
var str = JSON.parse(data);
$("#name").html(str.name);
$("#resume").html(str.resume);
var pWidth = $("#dataDialog").width();
var pHeight = $("#dataDialog").height();
var top = (height - pHeight) / 2;
var left = (width - pWidth) / 2;
$("#testBg").css({
"width": width,
"height": height,
"display": "block"
$("#dataDialog").css({
"top": top,
"left": left,
"display": "block"
36 &/head&
id="testBg" style="background:position:top:0left:0z-index:1;display:opacity:0.8"&&/div&
href="javascript:void(0);" id="test"&背景层测试&/a&
&div id="dataDialog"style="background:z-index:5;display:width:400position:"&
&table border="1" style="border:1border-collapse:"&
&tr&&td style="width:100"&姓名&/td&&td style="width:300"&个人简介&/td&&/tr&
&tr&&td id="name"&小飞象&/td&&td id="resume"&才毕业的菜鸟级别的人，总是犯一些未知活已知的错误，需要给出自己的判断力，加强自己的执行力，你需要不断的去把控自己，给出所有的问题一个正确的解决方式
&/td&&/tr&
48 &/body&
49 &/html&
Ajax是异步，就是Ajax程序执行的同时，Ajax程序之后的代码也在同时执行，虽然嘴上天天说着异步，只有真正用到的时候才感到异步的真不是说着玩的，想起一句老话，纸上得来终觉浅，绝知此事要躬行~
最后小插曲：
1 string name = "小飞象";
2 string resume = "才毕业的菜鸟级别的人，总是犯一些未知活已知的错误，需要给出自己的判断力，加强自己的执行力，你需要不断的去把控自己，给出所有的问题一个正确的解决方式";
3 StringBuilder sb = new StringBuilder();
4 sb.AppendFormat("{ \"name\":\"{0}\",\"resume\":\"{1}\"}", name, resume);
5 Console.WriteLine(sb.ToString());
6 Console.ReadKey();
在将字符串转成JSON格式遇到的一个问题，开始没看明白，知道这段代码错误的也可以跳过了，不知道的可以测试一下，写博客还是有好处的，第一篇技术博客，希望对需要的人有帮助，祝大家编程愉快~
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &By
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &Samll &Fly & Elephant
阅读(...) 评论()

我要回帖

更多关于 相对定位 的文章

 

随机推荐