绝对定位和相对定位的研究

                     绝对定位和相对定位的研究

现象：
研究jsp页面元素的绝对定位、相对定位、静态定位

定位属性：
首先看下 position 属性的设置
static ：无特殊定位
relative：相对定位
absolute：绝对定位

一：静态定位(static) 、
static，无特殊定位，它是html元素默认的定位方式，即我们不设定元素的position属性时默认的position值就是static，它遵循正常的文档流对象，对象占用文档空间，该定位方式下，top、right、bottom、left、z-index等属性是无效的。

二：相对定位(relative) 、
先说相对定位：所谓相对定位，就要有一个参照物，但这个参照就是它自己，原来的位置保留着，偏移后会把其它的层遮罩住。top left 等都是相对于之前的位置进行偏移。所以设置相对定位的时候，及时元素进行了对应的偏移，但是它之前占据的空间依旧会保留。

三：绝对定位(absoulte) 、
再说绝对定位，也都有一个参照位置，绝对定位的参照位置就不像相对那样是自己了，至于是哪个，就只能根据祖先类元素进行定位，而这个祖先类还必须是以postion非static方式定位的，如看它的上级或上上级有没有定位了，也就是有没有position:relative;或position:fixed了，当要绝对定位的层设好要参照位置的层后，就可以用TOP，LEFT这些来定位置了，如果它的上级或上上级都没定位的话只就会根据BODY的位置来定位了,还有最后一点，绝对定位是不占位置的，

四：固定定位位置 (fixed) 、
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

方法：
一：静态布局和默认布局
1：首先看看默认布局

2：设置静态布局可以看到 div的布局和没有设置效果是一样的。因为默认布局就是静态布局

3：设置了静态布局即使使用top left 这些偏移也是无法启动效果

二：设置相对定位
1：将div2 top设置为0px 所以div2相对之前的位置在y轴上没有偏移
设置 left 为110px 所以div2相对之前的位置向右偏移了110px

2：如果将div2设置相对定位向上偏移100px top设置为-100px，向右偏移110px left设置为110px。div2将偏移到 div1的后面。但是div3的位置便没有受到影响，因为相对定位元素虽然进行了偏移但是依旧会保留之前占用的位置空间。

3：相对定位相对的是它原本在文档流中的位置而进行的偏移，而我们也知道relative定位也是遵循正常的文档流，它没有脱离文档流，但是它的top/left/right/bottom属性是生效的，最重要的是它还占有文档空间，而且占据的文档空间不会随 top / right / left / bottom 等属性的偏移而发生变动，也就是说它后面的元素是依据元素偏移之前的位置进行的定位。

4：相对定位的时候 top/left/right/bottom不会对元素之前的位置进行偏移
那margin / padding会不会改变元素之前的位置呢

根据上图看出margin和padding都影响了元素之前的占位空间

三：设置绝对定位
1：设置元素绝对定位，元素之前占位空间将会不会被占据元素div1设置偏移之后 div2将会向上面布局，同时这种情况就会存在覆盖的问题。可以通过z-index来设置元素的层次

2：将div背景设置颜色可以看到 div1覆盖了div2

3：两个元素都设置绝对定位如果产生覆盖，可以设置z-index来设置元素的层次，层次越大将会在上面显示

4：绝对定位元素的祖先类元素(父类以上)进行定位，而这个祖先类还必须是以postion非static方式定位的，

5：那么祖先类中的margin/padding会不会对绝对定位position产生影响呢？看个例子
-未设置marrgin和padding

-14设置margin外边距

-15设置padding

根据上面可以看出设置了祖先类中的padding 对绝对定位的元素没有影响，只对没有设置绝对定位的元素如div2 有影响而设置了margin对绝对定位元素有影响

四：如果设置向右和向左偏移同时存在，效果会怎么样？如图
如果top和bottom一同存在的话，那么只有top生效。
如果left和right一同存在的话，那么只有left生效。

五：固定定位将由浏览器窗口作为定位标准，即使祖先类元素设置了postion定位也无效

绝对定位和相对定位的研究相关推荐

css怎么使元素绝对定位有过度效果_小猿圈web前端讲解div+css绝对定位和相对定位...
最近很多网友问我绝对定位和相对定位怎么区分,怎么使用?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面小猿圈w ...
CSS中定位（带你实操代码掌握固定定位、绝对定位与相对定位（子绝父相））
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 目录固定定位绝 ...
FX5u控制4个伺服，一个完整的项目回原点、JOG手动、绝对定位、相对定位、控制等部分
FX5u控制4个伺服,一个完整的项目程序用标签分层,说明了定位控制中的公共参数设定.回原点.JOG手动.绝对定位.相对定位.控制等部分,威纶程序报警界面.多个机种选择,手动,自动,暂停,包括有: ...
dw css定位,css关于position属性的用法详解(绝对定位和相对定位的混淆)
挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法. 在此首先看一下官方对这两个属性值的解释: pos ...
Java-绝对地址与相对地址/绝对定位与相对定位
Q:绝对地址与相对地址?绝对定位与相对定位? A:绝对地址:形如http://www.windstudio.net/index.htm或file://d:/homepage/index.htm这样的地 ...
CSS 绝对定位与相对定位
前几天遇到了上班的第一个难题,项目想要实现这样的效果: 一开始我天真地以为只要设置边框加上圆圈的图片就可以了,然而按这种方法实际上实现的效果是这样的: 实际效果比视觉图上下多了两截... 但是,聪明如 ...
CSS中的绝对定位和相对定位
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站点击跳转浏览. 1,理解绝对定位和相对定位要理解定位你要先理解文档流,在文档流中相对定位的元素占有位 ...
CSS 盒子模型，绝对定位和相对定位
盒子模型什么是盒子模型在HTML文档中,每个元素都有盒子模型.由外到内分别为最外边距区域(margin area),边框区域(border area),内边距区域(padding area)和内容 ...
绝对定位和相对定位的区别（详解）
一:绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是相对 ...

绝对定位和相对定位的研究

绝对定位和相对定位的研究相关推荐

最新文章

热门文章