绝对定位和相对定位的一些特性

position：absolute/fixed优先级最高，有他们在时，float不起作用

postion与display:使用定位属性时，元素的display变成了inline-block，宽度从100%变成了auto

postion与z-index:后者必须在定位属性下才会有效

position与overflow:当父元素使用了overflow且没有定位属性时，如果子元素是绝对定位且宽度或高度大于父元素，则oveflow会无效，如果想让父元素能限制子元素的溢出，则父元素必须使用相对定位

一、绝对定位

绝定对位是相当于最近一个具有定位属性的元素(postion不能为static)来进行偏移，如果没有找到这个元素，则以body作为偏移的基准，绝对定位后会随着页面的滚动而滚动。

绝对定位在块级元素上使用和行内元素上使用时有一些比较特殊的地方。

块级元素使用绝对定位

1.块级元素在定位前没有指定的宽度的话，默认是100%，但是定位以后宽度变成了auto

2.定位后如果没有指定top或left,此块级元素还是会占据原来的空间

<html>
<head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding:0;}body{position: relative;}.box1,.box2,.box3{/*没有设置宽度*/height: 100px;}.box1{background: red;}.box2{background: orange;position: absolute;padding-left: 50px;}.box3{background: gray;}</style>
</head>
<body><div class="box1">我是第一行</div><div class="box2">我是第二行，用了绝对定位了</div><div class="box3">我是第三行</div>
</body>
</html>

行内元素使用绝对定位
行内元素使用绝对定位后，变成了display:block，可以设置宽高及上下外边距

<html>
<head><meta charset="UTF-8"><title></title><style>
*{margin: 0;padding:0;
}
body{position: relative;
}
.box1,.box2,.box3{width: 100px;height: 100px;
}
.box1{background: red;
}
.box2{background: orange;position: absolute;left: 5px;margin-top: 50px;top: 10px;width: 200px;
}
.box3{background: gray;
}</style>
</head>
<body><span class="box1">我是第一行</span><span class="box2">我是第二行，绝对定位</span><span class="box3">我是第三行</span>
</body>
</html>

二、相对定位
相对定位不会脱离文档流，偏移的参照物是自身，偏移后元素原来的空间还是会被占据。
如果父元素使用了overflow,而子元素使用了绝对定位且宽高超过容器时，父元素的overflow会无效，此时如果想限制子元素的溢出，必须给父元素加上相对定位

<html>
<head><meta charset="UTF-8"><title></title><style>.box{overflow: hidden;width: 50px;height: 50px;border: 1px solid gold;}.son{position: absolute;width:200px;height: 200px;border: 1px solid gray;}</style>
</head>
<body><div class="box"><div class="son">我是绝对定位</div></div><div class="box" style="position: relative"><div class="son">我是绝对定位，父元素用了相对定位</div></div>
</body>
</html>

当后面的元素盖住了前面的元素时，如果前面的加素加上postion:relative则可以反过来盖住后面的元素。

<html>
<head><meta charset="UTF-8"><title></title><style>.son{width:100px;height: 100px;border: 1px solid gray;}</style>
</head>
<body><img class="son" style="background-color:red;"></img><img class="son" style="background-color:gold;margin-left:-50px;"></img>
</body>
</html>

前面的元素使用postion:relative前后对比图

更多专业前端知识，请上【猿2048】www.mk2048.com

绝对定位和相对定位的一些特性相关推荐

css导航栏固定顶部两种情况,及绝对定位，相对定位，固定定位和粘性定位的特性及区别
绝对定位,相对定位,固定定位和粘性定位的特性及区别,我整理一下放在文章最下面了,不用死记硬背,理解一下就ok,需要的话可以看看. 当导航栏头部没有别的模块时,想要滑动过程中导航栏一直在顶部,有两种写法 ...
css怎么使元素绝对定位有过度效果_小猿圈web前端讲解div+css绝对定位和相对定位...
最近很多网友问我绝对定位和相对定位怎么区分,怎么使用?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面小猿圈w ...
css中的定位以及绝对定位和相对定位的区别
一:绝对定位 (position: absolute) 绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是 ...
CSS中定位（带你实操代码掌握固定定位、绝对定位与相对定位（子绝父相））
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 目录固定定位绝 ...
FX5u控制4个伺服，一个完整的项目回原点、JOG手动、绝对定位、相对定位、控制等部分
FX5u控制4个伺服,一个完整的项目程序用标签分层,说明了定位控制中的公共参数设定.回原点.JOG手动.绝对定位.相对定位.控制等部分,威纶程序报警界面.多个机种选择,手动,自动,暂停,包括有: ...
dw css定位,css关于position属性的用法详解(绝对定位和相对定位的混淆)
挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法. 在此首先看一下官方对这两个属性值的解释: pos ...
绝对定位和相对定位的研究
绝对定位和相对定位的研究现象: 研究jsp页面元素的绝对定位.相对定位.静态定位定位属性: 首先看下 position 属性的设置 static :无特殊定位 relative:相对定位 abso ...
Java-绝对地址与相对地址/绝对定位与相对定位
Q:绝对地址与相对地址?绝对定位与相对定位? A:绝对地址:形如http://www.windstudio.net/index.htm或file://d:/homepage/index.htm这样的地 ...
CSS 绝对定位与相对定位
前几天遇到了上班的第一个难题,项目想要实现这样的效果: 一开始我天真地以为只要设置边框加上圆圈的图片就可以了,然而按这种方法实际上实现的效果是这样的: 实际效果比视觉图上下多了两截... 但是,聪明如 ...

绝对定位和相对定位的一些特性

绝对定位和相对定位的一些特性相关推荐

最新文章

热门文章