详解position定位与定位应用
定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样。如果理清了定位的原理,那定位会让网页实现的更加完美。
在CSS中关于定位的内容是:position:relative | absolute | static | fixed
auto 遵从其父对象的定位 namber 无单位的整数值。可为负数
1.可以位移的元素 (相对定位)
在本文流中,任何一个元素都被文本流所限制了自身的位置,但是通过CSS我们依然使得这些元素可以改变自己的位置,我们可以通过float来让元素浮动,也可以通过margin来让元素产生位置移动。但事实上那并非是真实的位移,因为,那只是通过加大margin值来实现的障眼法。而真正意义上的位移是通过top,right,bottom,left(下称TRBL,TRBL可以折分使用。)针对一个相对定位的元素所产生的。我们看下面的图:
如上所述:相对定位只可以在文本流中进行位置的上下左右的移动,同样存在一定的局限性,虽然他的表现区脱离了文本流,但是在文本流却依然为其保留了一席之地,这就好比一个打工的人他到了外地,但是在老家依然有一个专属于他的位置,这个位置不随他的移动而改变。但是这样很明显就会空出一块空白来,如果希望文本流抛弃这个部分就需要用到绝对定位。绝对定位不光脱离了文本流,而且在文本流中也不会给这个绝对定位元素留下专属空位。这就好比是一个工厂里的职位,如果有一个工人走了自然会要有别的工人来填充这个位置。而移动出去的部分自然也就成为了自由体。绝对定位将可以通过TRBL来设置元素,使之处在任何一个位置。在父层position属性为默认值时,TRBL的坐标原点以body的坐标原点为起始。看下图:
上面说的是单一的绝对定位,而在实际的应用中我们常常会需要用到一种特别的形式。即希望定位元素要有绝对定位的特性,但是又希望绝对定位的坐标原点可以固定在网页中的某一个点,当这个点被移动时绝对位定元素能保证相对于这个原坐标的相对位置。也就是说需要这个绝对定位要跟着网页移动,而并且是因定在网页的某一个固定位置。通常当网页是居中形式的时候这种效果就会显得特别的重要。要实现这种效果基本方式就是为这个绝对定位的父级设置为相对定位或是绝对定位。那么绝对定位的坐标就会以父级为坐标起始点。
虽然是如此,但是这个坐标原点却并不是父级的坐标原点,这是一个很奇怪的坐标位置。我们看一下模型图示:
我们看到,这个图中父级为黑灰色区块,子级为青色区块。父级是相对定位,子级是绝对定位。子级设置了顶部位移50个像素,左倾位移50个像素。那么我们看,子级的坐标原点并不是从父级的坐标原点位移50个像素,而是从父级块的padding左上边缘点为坐标起始点(即A 点)。而父级这里如果要产生位置移动,或是浏览器窗口大小有所变动都不会影响到这个绝对定位元素与父级的相对定位元素之间的位置关系。这个子级也不用调整数值。
这是一种很特别并且也是非常实用的应用方式。如果你之前对于定位的控制并不自如的话,相信看完对这里对定位的解释一定可以把定位使用得随心所欲。
4.总在视线里的元素 (固定定位)
position:fixed; 他的含义就是:固定定位。这个固定与绝对定位很像,唯一不同的是绝对定位是被固定在网页中的某一个位置,而固定定位则是固定在浏览器的视框位置。
注释:此文章内容转载自 http://blog.sina.com.cn/s/blog_4bcf4a5e010008o0.html
详解position定位与定位应用的更多相关文章
- 小甲鱼PE详解之基址重定位详解(PE详解10)
今天有一个朋友发短消息问我说“老师,为什么PE的格式要讲的这么这么细,这可不是一般的系哦”.其实之所以将PE结构放在解密系列继基础篇之后讲并且尽可能细致的讲,不是因为小甲鱼没事找事做,主要原因是因为P ...
- Selenium3详解(基本操作,定位方法)
如果想使用selenium驱动不同的浏览器,必须单独下载并设置不同的浏览器驱动. 基本操作: 刷新:refresh, 获取浏览器窗口大小:get_window_size 设置浏览器窗口大小:set_w ...
- css详解position五种属性用法及其含义
position(定位) position - 作为css属性三巨头(position.display.float)之一,它的作用是用来决定元素在文档中的定位方式.其属性值有五种,分别是 - stat ...
- xpath与css_selector定位详解
例题:分别用xPath和css_selector定位下图的img标签 答案: xpath:.//*[@id='fstscr']/div[3]/div[2]/a/img css_selector: . ...
- css详解background八大属性及其含义
background(背景) 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由 元素外边距(margin).元素边框(border).元素内边距(padding)和元素内容(c ...
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- CSS魔法堂:Position定位详解
一.Position各属性值详解 1. static :默认值,元素将按照正常文档流规则排列. 2. relative :相对定位,元素仍然处于正常文档流当中,但可以通过left.top. ...
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
- css相关,position定位详解
CSS 有两个最重要的基本属性,前端开发必须掌握:display 和 position. display属性指定网页的布局.两个重要的布局,弹性布局flex和网格布局grid. 本文介绍非常有用的po ...
随机推荐
- Mysql优化-字段设计
摘抄并用于自查笔记 1. 对精度有要求decimal float 类型用于表示单精度浮点数值,而double类型用于表示双精度浮点数值,float 和 double 都是浮点型,而 decimal 是 ...
- SQL一些记录
1,2字段约束create unique index [索引名] on 软件信息表(S_SName,S_Edition)
- poj1363 Rails Central Europe 1997
P.S.: 输出换行 三个方法 1.直接按照要求做 根据给的数,需要push,pop哪些数据,具有唯一性 数最多进栈一次,出栈一次 O(n) Source Code Problem: User: co ...
- SPR, subpixel rendering
参考例子:https://www.grc.com/ctwhat.htm https://en.wikipedia.org/wiki/Subpixel_rendering http://archernz ...
- Redis中取出值,转成对象
import com.fasterxml.jackson.databind.ObjectMapper; //转成companyEntity CompanyEntity company = mapper ...
- js input框限制输入为数字并限制长度
<input type="number" name="price" id="priceVal" placeholder="请 ...
- springcloud ribbon Finchley 版本,自定义算法
引用上一个项目,在原有的基础上进行更改,添加springcloud的内荣. eureka-server 和上一个springcloud eureka的一样,没有改动. 添加cloud-api pack ...
- Mybatis 动态insert动态插入的坑
在写insert子句的时候,由于不知道需要插入多少字段,mybatis通过prefix,suffix,suffixOverrides很好的解决了该问题,实现了动态insert语句. 用这种动态插入时& ...
- 服务器访问数据库表mysql
服务器的MySQL配置就不说了,直接说一些用到的基础命令 登陆 show databases; use 数据库: show tables; 执行sql即可: 一定要有分号 select * from ...
- (转)linux centos 编译luabind-0.9.1 动态库 静态库
编译时:virtual memory exhausted: Cannot allocate memory 一.问题 当安装虚拟机时系统时没有设置swap大小或设置内存太小,编译程序会出现virtual ...